The Animation Challenge

We've covered a lot of material so far, and 0:00 you're ready to start creating SVG animations with CSS on your own. 0:02 So now it's time for you to create a simple SVG animation sequence 0:07 using CSS transforms, key frames, and animation properties. 0:10 You'll see a link to the files you need to create this animation challenge 0:15 in the teacher's notes of this video. 0:18 So first, let's plan the animation sequence. 0:20 What are you gonna animate, and what are the different steps of the animation? 0:23 So, this is the animation sequence I want you to create. 0:27 In this animation, there are seven separate steps. 0:30 So the first three steps are the slide movements of the three stars. 0:34 They each slide up at different times. 0:38 The next three steps are the pulsing animations. 0:41 Each star scales and rotates while their fill color transitions to a light yellow. 0:45 Finally, we see a light stroke animating around the circle shape. 0:51 In the HTML file, I've already provided the class names for each element. 0:56 So now it's your turn to create the animations in the style sheet. 1:01 This animation challenge is a great way to practice what you've learned so far. 1:08 In the next video I'll show you how I did it. 1:12 Have fun. 1:14