Start a free Courses trial
to watch this video
In this video Guil Hernandez introduces the most recent Forum Contest Topic, Interactive CSS Animation.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hey everyone, Guil here with the new Treehouse forum contest. 0:00 This week, you're gonna create an interactive CSS animation sequence. 0:03 What do I mean by that? Well, let's take a look at a few examples. 0:07 And keep in mind that you shouldn't need any JavaScript to build these. 0:11 So for instance, here's a demo I created a while ago for a blog post. 0:14 It uses three images and an input element whose type is a text box and it's 0:19 actually styled to look like a button and 0:25 once we click this start race button, it triggers 0:28 a background animation and then these two images 0:31 race against each other and there's this final winner. 0:35 Event that happens there. 0:39 So this is all done using CSS. I'm actually using the checked state 0:40 of this input element to trigger these animation sequences 0:45 along with general and adjacent sibling selectors. 0:50 So that's one way that you can do it. 0:54 Here's another example. 0:56 These are CSS creatures. And, as you can see, they all animate. 0:58 They bounce, they turn, they jump. 1:02 And once your hover over them or click on them, something happens. 1:05 They expand, they smile, they blink. So this is all done with CSS as well. 1:08 In order to create animation sequences like these 1:16 you can take advantage of the hover, active 1:19 or the even the checked state of an element as we just saw in the examples. 1:21 Along with some of those adjacent and 1:25 general sibling selectors to trigger the animation sequence. 1:27 Feel free to use Sass or any CSS preprocessor to build these. 1:31 Remember, the interactive animation sequence should only use HTML and CSS. 1:35 No JavaScript this time. 1:40 Now, there are more details about the form contest below this video. 1:41 So take a look at those before you 1:45 begin your entry, but most importantly, have fun. 1:46 This can be a really neat project you can 1:49 use to show to a client or potential employer. 1:51 I can't wait to see what you come up with. 1:55
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up