Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
To work on this challenge, launch the Workspace for this video or download the project files.
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
You need to sign up for Treehouse in order to download course files.
Sign up