1 00:00:00,530 --> 00:00:02,930 We've covered a lot of material so far, and 2 00:00:02,930 --> 00:00:07,240 you're ready to start creating SVG animations with CSS on your own. 3 00:00:07,240 --> 00:00:10,500 So now it's time for you to create a simple SVG animation sequence 4 00:00:10,500 --> 00:00:13,910 using CSS transforms, key frames, and animation properties. 5 00:00:15,170 --> 00:00:18,500 You'll see a link to the files you need to create this animation challenge 6 00:00:18,500 --> 00:00:20,730 in the teacher's notes of this video. 7 00:00:20,730 --> 00:00:23,650 So first, let's plan the animation sequence. 8 00:00:23,650 --> 00:00:27,080 What are you gonna animate, and what are the different steps of the animation? 9 00:00:27,080 --> 00:00:30,920 So, this is the animation sequence I want you to create. 10 00:00:30,920 --> 00:00:34,410 In this animation, there are seven separate steps. 11 00:00:34,410 --> 00:00:38,640 So the first three steps are the slide movements of the three stars. 12 00:00:38,640 --> 00:00:41,820 They each slide up at different times. 13 00:00:41,820 --> 00:00:45,390 The next three steps are the pulsing animations. 14 00:00:45,390 --> 00:00:51,110 Each star scales and rotates while their fill color transitions to a light yellow. 15 00:00:51,110 --> 00:00:55,160 Finally, we see a light stroke animating around the circle shape. 16 00:00:56,620 --> 00:01:01,260 In the HTML file, I've already provided the class names for each element. 17 00:01:01,260 --> 00:01:05,121 So now it's your turn to create the animations in the style sheet. 18 00:01:08,621 --> 00:01:12,650 This animation challenge is a great way to practice what you've learned so far. 19 00:01:12,650 --> 00:01:14,890 In the next video I'll show you how I did it. 20 00:01:14,890 --> 00:01:15,390 Have fun.