Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Guil Hernandez
Treehouse TeacherForum Contest: CSS Animation
EDIT: This contest has ended! Congratulations to Kirill Gusev for his winning entry! Our next contest on creating an Interactive Resume/CV is up!
Hi everyone,
It's time for a new Treehouse Forum contest! First, watch this video to learn more:
After you've watched the video, please read the details below carefully. I'm looking forward to your entries!
How to Enter:
Create your interactive animation entry as a "pen" on Codepen.io and then post the link to your pen as an answer to this post.
Due Date:
All entries must be submitted by February 9th at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.
Prize:
The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Gold on us! We'll announce the winner on February 10th and reveal the next contest.
34 Answers
John Sanchez
iOS Development Techdegree Student 2,401 PointsCool! I'm SO doing this!!!
Daniel Fernández
2,756 PointsI like so much Treehouse, even we have contests. I also think that is a good way to improve. :)
missgeekbunny
37,033 PointsI must admit I am trying to engage in the contest just for the simple fact of even if I don't win it's something that I can show off in my portfolio to maybe help me get hired.
Guil Hernandez
Treehouse TeacherAdam Sackfield - As long as it isn't used to animate (or trigger the animation of) an element.
Suli S
1,475 PointsHi Guil,
I would like to ask: How do you think the future of CSS will be? and what do you recommend me to do if I want to be expert in CSS?
franchesca austin
Courses Plus Student 301 Pointswow So cool to see we have contest. I signed up yesterday and I am having a great time learning. There is A lot I didn't know. Great detailed tutorials So far. :)
agon bina
Courses Plus Student 639 PointsI have done this pen after I had finished all the CSS and Sass courses on Treehouse, so hopefully this counts: http://codepen.io/agonbina/pen/tjdza
It's very short but it's supposed to demo a fictional mobile app.
I appreciate any feedback.
Brian Molkovich
11,333 PointsCheck your demo...
Marcus Bellon
2,866 PointsOnly one entry per person?
Dani Ivanov
10,732 PointsNice, definitely going to join when I've learned enough :) I didnt know that you guys organized contests as well.
Alessandro Elkan
Courses Plus Student 7,447 Pointshttp://codepen.io/nousacademy/pen/zcpJq Here's mine!! I'm just not sure how to make my background image loop instead of restarting! I also use this for the front page of my site!
Brian Moon
6,645 Points
Thomas Sifflet
1,505 PointsThis is one marvelous animation :o Very good job Brian !
Brian Moon
6,645 PointsThanks Thomas! 4000 lines of code on my CSS for this one :)
Jeremiah Long
1,532 PointsThat's a shoe-in for a winner. I believe you need to post it to code pen for it to be entered into the contest though.
Brian Moon
6,645 Pointsthanks for the info! I'll try to transfer the code to Codepen :)
agon bina
Courses Plus Student 639 PointsThat is in CSS? I couldn't inspect the html, there was no way to inspect the code. It looks like Flash or something :)
Nevertheless great animation!
Jeremiah Long
1,532 PointsLooks like it's CSS to me. It's got about 100 divs with cool names like "walking-leo" and not one SWF. He's used several GIF files to create the animation which I think is allowed in the contest, but I'm not sure. By the way, you can inspect code using CTRL-U.
Kirill Gusev
Courses Plus Student 3,199 PointsReally great! But It's more like a movie. And as I understood this contest is about not just animations but interactive animations. Which allow user to interact with page without JavaScript.
Rohit Begani
5,614 PointsWow!! :0 Amazing work!!
manu sharma
2,692 Pointshttp://cdpn.io/FBdtm or my code http://codepen.io/manusharma/pen/FBdtm This is a small effort I guess this will cover some of the CSS animation I have learnt from TreeHouse. My main effort is to make it work on as may web browsers as I can.
Bryan Phelan
18,191 Pointshttp://cdpn.io/JEuwk Go Broncos! Great season, horrible ending!
Jeremiah Long
1,532 PointsIs SASS allowed in the CSS?
Guil Hernandez
Treehouse TeacherJeremiah Long – It sure is!
Jeremiah Long
1,532 PointsCool, thanks for the reply Guil. Love your courses by the way! I feel my ability to control websites with CSS has greatly improved since going through your CSS courses, especially your conversation on specificity. You explained exactly why my previous CSS didn't always do what I expected.
Guil Hernandez
Treehouse TeacherJeremiah Long - Glad to hear I was able to help!
Guil Hernandez
Treehouse TeacherKirill Gusev - Exactly! :)
Catherine Millington
3,754 PointsI want to do it but I'm only up to Stage 7 Backgrounds and Borders on CSS :o/ Looking forward to being able to get involved next time though!
Paul Yorde
10,497 PointsLooking forward to see what you create!
Jonas Ouadih
Courses Plus Student 1,328 Pointshttp://codepen.io/anon/pen/kJadH - I don't own any images, or music. Have a great weekend everyone!
Marcus Bellon
2,866 Points@Jonas I must have listened to that for 5 mins lol. Nice touch having the sprite go behind the blocks and tunnel. Grats!
Brian Molkovich
11,333 PointsAnd is it possible to use jquery, in my opinion can only be used CSS & HTML, maybe I'm wrong of course...
Jeremiah Long
1,532 PointsHe makes it very clear in the video that no Javascript is allowed for this competition. I've actually learned a lot about CSS animation and transitions since starting my project. This is a good contest.
Brian Molkovich
11,333 PointsThis is my version of the animation - http://codepen.io/Delime/pen/IyuAr and fullscreen demo http://flexteam.bugs3.com/.
Jeremiah Long
1,532 PointsCool looking animation. I love how you use the DRY principle in your code. I really need to get better at this myself.
Zachery Campbell
10,617 PointsWow, that's pretty solid!
John Sanchez
iOS Development Techdegree Student 2,401 PointsNot very good compared to the other entries... but hey, I just started learning CSS 2 weeks ago. With Code: http://codepen.io/j0hns0n8/pen/wlBvG Full Screen: http://cdpn.io/wlBvG Feedback is appreciated!
Brian Moon
6,645 Pointshttp://codepen.io/brian0306/pen/GKeAf Here is the "Codepen" version of my CSS animation. Enjoy! :)
Zachery Campbell
10,617 PointsGreat job Brian, this is incredible.
Brian Moon
6,645 PointsThanks Zachery! Glad you liked it :)
Marcus Bellon
2,866 PointsWell, I don't think it's bad for my first thing coded ever. I had a lot of fun building this and learning how the different attributes behave and relate to eachother. I realize the code is sloppy, but like I said... just learning. Play the piano! http://codepen.io/bellonart/pen/sDyzj
Stephen Smith
Courses Plus Student 27,878 PointsFor what it's worth, this is my animation: With code: http://codepen.io/stephensmith100/pen/vnpuf Full screen: http://codepen.io/stephensmith100/full/vnpuf
Adam Sackfield
Courses Plus Student 19,663 PointsNice!!
Frank Zschieschang
17,584 PointsI really enjoyed playing around with many CSS properties but I have to admit it gave me a few more grey hair. http://codepen.io/Lost/pen/wILDc
Marcus Bellon
2,866 PointsThat is badass!
Kirill Gusev
Courses Plus Student 3,199 Points
Marcus Bellon
2,866 PointsThat is slick!
Paul Yorde
10,497 PointsFantastic! I love the art work, and the design!
Gary Mann
8,639 PointsGuil, this was an awesome learning experience. Thanks.
Code here: http://codepen.io/GaryMann/pen/jFhtK Full Page here: http://codepen.io/GaryMann/full/jFhtK
Marcus Bellon
2,866 PointsThat's awesome!
Paul Yorde
10,497 PointsBrilliant!
Andrew Anderson
7,284 PointsThis was a lot of fun! Here is my entry with code: http://codepen.io/atanderson/pen/ezGwq, and full page :http://codepen.io/atanderson/full/ezGwq
agon bina
Courses Plus Student 639 PointsAndrew that's awesome!
Paul Yorde
10,497 PointsLove it! Great animation and graphics.
Michael Brown
11,009 PointsSince it's almost baseball season, here's my code: http://codepen.io/mfbrown/pen/Idicg, and in full screen: http://codepen.io/mfbrown/full/Idicg
Admittedly, I'm having a big issue with my first "hit" keyframe in Safari. I can't seem to figure out how to make the batter stay visible while using the rotateY property. Any help from Safari gurus would be appreciated!
Zachery Campbell
10,617 PointsThats pretty neat!
Paul Yorde
10,497 PointsI agree, this was so much fun, and great learning experience to kick.
Tech used: SASS, CSS3
Submission: (http://cdpn.io/ixLor)
Tom Bedford
15,645 PointsHere is my entry (full screen).
It is a camera shutter - there is a surprise inside when you open it! The full code is here.
Edit: I hope the surprise of the scale model of the solar system + controls was apparent.
Guil Hernandez
Treehouse TeacherHey everyone,
Wow, there were so many impressive entries! I'm glad to see that it was a fun learning exercise for many of you – that's what it's all about. :) Now on to the announcement...
Congrats to Kirill Gusev on his winning entry! It was really close, but Kirill's clever use of different element states, transforms/transitions, and overall design is what made it our top choice.
Nice work, everyone. Stay tuned for a new contest announcement today!
Guil
Tom Bedford
15,645 PointsWell done Kirill Gusev!
Kirill Gusev
Courses Plus Student 3,199 PointsThank you! Really glad to khow this! It motivates me to work even better on my skills. Treehouse team, thanks for your courses as well. I find something new and usefull in each video I watch. And I will be so pleased to learn with you.
Gary Mann
8,639 PointsCongrats Kirill ! Cool stuff with that cubic-bezier effect!
Jeremiah Long
1,532 PointsCongratulations to the winner.
I'm a little shocked to read it's over. I had mis-read the due date and thought it was the 19th. Pretty sad I missed the chance to enter this fun competition.My pen isn't done yet because I thought I had another week, but I'll post what I have so far.
There was going to be about 6 more clouds, and animated rain, and some flowers on the grass that opened up when sunny, and closed when raining. All the gradients were going to gray out during rain too. No images, just CSS.
Man, I'm super bummed about mis-reading the due date, but that's part of coding right? Attention to detail is very important. :) http://codepen.io/JML/pen/rFlxs
Jeremiah Long
1,532 PointsBut congratulations to the winner. That's a great animation you made there. That should have been the first thing I said, I was just a bit shocked to read it was over. Cheers Kirill.
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsGuil Hernandez can we use jquery to pull I'm some JSON. Then use this for the CSS animation?