Preview
Video Player
00:00
00:00
Finishing the Animation Sequence
7:01In this video, you will complete the badge animation by creating the star animation keyframes.
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