We've covered a lot of material so far, and

you're ready to start creating SVG animations with CSS on your own.

So now it's time for you to create a simple SVG animation sequence

using CSS transforms, key frames, and animation properties.

You'll see a link to the files you need to create this animation challenge

in the teacher's notes of this video.

So first, let's plan the animation sequence.

What are you gonna animate, and what are the different steps of the animation?

So, this is the animation sequence I want you to create.

In this animation, there are seven separate steps.

So the first three steps are the slide movements of the three stars.

They each slide up at different times.

The next three steps are the pulsing animations.

Each star scales and rotates while their fill color transitions to a light yellow.

Finally, we see a light stroke animating around the circle shape.

In the HTML file, I've already provided the class names for each element.

So now it's your turn to create the animations in the style sheet.

This animation challenge is a great way to practice what you've learned so far.

In the next video I'll show you how I did it.

Have fun.