Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
The Animation Challenge1:16 with Guil Hernandez
We've covered a lot of material so far, and you're ready to start creating SVG animations with CSS on your own. In this animation challenge, you will create an SVG animation sequence using CSS transforms, keyframes, and animation properties.
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.
You need to sign up for Treehouse in order to download course files.Sign up