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.