Forum Contest | Interactive CSS Animation

[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