Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Animating SVG with CSS!
You have completed Animating SVG with CSS!
Preview
In this video, you will complete the badge animation by creating the star animation keyframes.
Update
If the rotation appears off-center, apply transform-box: fill-box to your SVG, like so:
.star {
animation: turn 1.1s .2s ease-out backwards;
transform-box: fill-box;
}
You can learn more about transform-box on MDN.
Quick Reference
Related Videos
Browser Support
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay, so let's continue
building the animation sequence
0:00
by creating the keyframes that will
scale and rotate the star element.
0:03
So, back in my style sheet,
right beneath the grow keyframes,
0:08
I'm going to define a new @keyframes rule,
and I'll name this animation turn.
0:13
Inside the keyframe rule, I'm going
to create four keyframe selectors.
0:22
So first, I'll create one at 0%,
then I'll create one at 60%.
0:26
I'll create another one at 80% and
0:32
finally, I'll create one at 100% for
0:38
this animation, I want to animate
the elements' opacity, scale, and rotation.
0:43
So first, inside this 0% key frame,
I'm going to add a transform property,
0:48
then I'll use the rotate function and
set rotate to zero.
0:54
Then I'll set scale to zero.
0:59
And I also want to start
with zero opacity.
1:02
So I'll include the opacity property and
set the value to zero.
1:05
So now I can set the rotation degrees and
scale sizes in the next three key frames.
1:10
So I want to rotate the start element
360 degrees in this animation.
1:16
So first, at 60%,
I'll define a transform property,
1:20
and I'll set rotate to 375 degrees.
1:26
Then I'll use the scale function
to set the scale to 1.1.
1:30
So right below at 80%,
I'm going to include a transform property,
1:36
and a rotate function, and I'm going
to set the rotation to 355 degrees.
1:42
And then, I'll set the scale to 0.9.
1:50
Once again I'm slightly
overshooting the final rotate and
1:54
scale values then going below them to
give them that realistic bounce effect.
1:58
Finally, at 100%,
I'll add a transform property and
2:04
then I'll define a rotation of
360 degrees, and a scale of 1.
2:11
All right, so now let's give the start
element this new turn animation.
2:19
So, right below, in my SVG styles,
2:25
I'm going to create a new
rule that targets star.
2:28
Inside the star rule,
I'll add an animation property.
2:35
Then I'll reference that
turn keyframe rule.
2:38
I'll set the animation
duration to 1.1 seconds.
2:41
Then I'll set the animation
delay to 0.2 seconds.
2:45
I'll also give this a timing
function of ease-out.
2:49
And once again,
I'm going to apply a backwards fill mode.
2:53
This will immediately apply the first
animation keyframe when the page loads.
2:56
All right?
So, let's have a look at our animation.
3:01
I'll save the style sheet,
and go back to my preview.
3:02
And once I refresh, we see the star fade
in, while rotating a full 360 degrees.
3:05
Then it eases to a halt.
3:12
Neat.
3:14
So now we have four out of
the five animations complete.
3:16
Now, the final animation is a pulsing
circle effect and the star's five points.
3:19
So, back in my style sheet,
under my keyframe I'm going to create
3:26
a set of keyframes named pulse.
3:31
And I'm only gonna define
one keyframe in this rule.
3:38
A keyframe at 50%.
3:41
Then, I'll add a transform property, and
3:43
set the scale to 1.4, so
that it's slightly higher than 1.
3:47
So in this keyframe rule, I don't need
include keyframes for 0% or 100%.
3:54
Because at 0%, the animation
will use the elements initial
3:59
scale value then animate to
the scale value here at 50%.
4:04
And then back to
the initial value at 100%.
4:08
So it saves me the effort of
having to write the start and
4:11
end properties inside the keyframe rule.
4:14
So next, in my SVG styles,
4:17
I'm going to target the circle elements
inside .star by creating a new rule
4:20
that targets the .star class and
it's descendent, circle elements.
4:26
Inside the rule I'll add
an animation property.
4:31
And I'm going to call the pulse animation.
4:34
I'll set the animation duration to .7s and
the delay to 1.5s.
4:37
So when I save my stylesheet and
preview the animation in the browser,
4:44
notice how all five circles in
the star pulse at the same time.
4:49
Now, to make this animation sequence a
little more interesting I want to stagger
4:55
the pulsing animations so that they
don't all animate at the same time.
5:00
I can create this effect by
using the nth-of-type selector
5:05
to apply different animation
delays to each circle.
5:09
So I'm going to create a new
selector that targets star.
5:12
Followed by a descendant circle element,
and I'm going to write nth-of-type.
5:18
So, nth-of-type will specifically
target a circle element,
5:27
based on its position
inside the star element.
5:31
Now the first circle doesn't need a delay.
5:35
So I want to start the delay
on the second circle element.
5:38
So I'm going to pass 2 as
the nth-of-type argument.
5:41
So inside this rule,
I'll add an animation-delay property.
5:46
And set the value to 1.6s.
5:50
So next, to animate the third, fourth, and
fifth circle elements, I can simply copy
5:54
this rule here, paste it below, and
I'll change this to nth-of-type(3), and
6:00
I'll delay the third
circle by 1.7 seconds.
6:06
I'll paste another one right below, and
I'll change it to nth-of-type 4 and
6:12
I'm going to delay the 4th
one by 1.8 seconds.
6:18
Finally, I'll create one for
the fifth circle element.
6:23
And I will delay this one by 1.9 seconds.
6:27
So now, when I save my style sheet,
and refresh the browser.
6:36
You can see how the different animation
delays stagger at the pulsing circles.
6:40
Cool.
6:44
So there you have it.
6:47
The full animation sequence is complete.
6:48
We created multiple animations for
one SVG element by breaking the sequence
6:51
down in two parts, then writing key frames
and animation styles for each part.
6:56
Nice work.
7:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up