Preview
Video Player
00:00
00:00
Creating an SVG Animation Sequence
9:16You can create fun and engaging animation sequences with SVG and CSS keyframe animations. In this video, you will create a simple badge animation using SVG, CSS keyframe rules, and animation properties.
[MUSIC]
0:00
Now that you have the basics of
transitioning and transforming SVGs down
0:04
pat, it's time to explore the wonders
of SVG animation with CSS keyframes.
0:08
Combining SVG and keyframe animations,
you can make your graphics come to life by
0:13
creating simple yet fun and
engaging animations like this.
0:18
Or you can create more complex animation
sequences like this Traveler animation.
0:22
You can find all kinds of awesome SVG
animations example on codepen.io.
0:26
Coming up in this video, I'm gonna teach
you how to create a simple animation
0:31
sequence using SVG, CSS keyframe rules,
and animation properties.
0:36
In a later video, you're gonna learn
the concept behind SVG line animation.
0:40
You don't wanna miss that part.
0:43
Before we begin coding,
0:46
let's take a look at the animation
sequence we're going to create.
0:47
As you can see, there are several
animation steps happening at once, and
0:50
they're all using transform functions,
like scale and rotate.
0:55
Now if this badge graphic looks familiar,
0:58
that's because it's the same SVG you
worked with in the SVG Basics course.
1:01
Now we're gonna animate it.
1:05
So first,
let's plan the animation sequence.
1:07
What are we gonna animate and what
are the different steps of the animation?
1:10
So in this animation,
there are five separate steps.
1:14
There's the scaling of the outer circle,
1:17
then there's the scaling
of the inner circle.
1:19
After that,
there's the scaling of the inline strokes.
1:20
And then we're rotating and scaling the
star, and finally we're adding a pulsing
1:28
effect to the circles here, and this is
done with scaling, so let's get to work.
1:33
In the latest workspace for this lesson, I
have an HTML file linked to a style sheet.
1:39
And the HTML contains
the embedded SVG graphic.
1:45
It's made up of circle shapes and paths.
1:49
So first, I wanna give some of
these elements class names so
1:52
I can easily target them with CSS.
1:57
So I'll start by giving the svg
element the class badge.
1:59
So next, the first circle element
is the outer circle in the graphic,
2:10
so I'm going to give it a class of outer.
2:15
Now the next circle element is
the inner circle in the graphic, so
2:21
I'll give this one a class of inner.
2:25
And the path element below draws
the inline strokes between the outer and
2:30
inner circles.
2:35
So I'm going to give this path
element the class inline.
2:37
Finally, the next set of paths and
circles draw the star in the graphic.
2:44
So I wanna animate these six
elements here as one object.
2:50
In the previous stage,
2:55
you learned how to use the g element
to group SVG shapes together.
2:56
So I'm going to nest the path and circle
elements here inside inside a g element.
3:00
And I'm going to give the g
element the class star.
3:06
Then right after the last
circle element and
3:13
right above the closing svg tag,
I'll add a closing g tag.
3:16
So now I can transform this entire
group here as a single object.
3:24
So next I'll save my index.html file.
3:29
And I'm going to open style.css and
write the keyframes for the animation
3:33
sequence so that the keyframes will all go
here, under this Keyframes comment flag.
3:38
So first, I want to create an animation
that scales an element from zero to one,
3:44
so I'm going to create a keyframe
rule by typing @keyframes.
3:50
And I'm going to name this animation,
grow.
3:55
To give me more control over
how the animation progresses,
4:00
I'm going to create three
keyframes here using percentages.
4:04
So I'm only defining keyframes
4:07
at 0%, 30%, and 60%.
4:13
So that means that at 100%, the browser
will animate back to the original
4:21
values for the properties being animated.
4:26
So at 0%, we don't wanna see the element.
4:29
Now an easy way to do that
is to set the scale to zero.
4:34
So I need to use the transform
property and the scale function,
4:38
and then I'll write 0 as the argument for
scale.
4:43
And at 30%,
I'm going to scale the element up to 1.1.
4:48
So again,
I'll write a transform property, and
4:53
use the scale function, and
I'll define 1.1 as the argument.
4:57
So next at 60%,
I'm gonna set the scale to 0.9.
5:02
I'm setting these scale values slightly
larger than 1 at the 30% keyframe,
5:13
and below 1 at 60% to make
the animation more fluid and realistic.
5:19
Scaling an element beyond, below,
5:24
then back to its original size will
give it a sort of bounce effect.
5:27
So to run the animation,
5:31
I need to reference the grow
keyframes inside a selector rule.
5:33
So let's apply the animation to the outer,
inner, and inline elements.
5:37
So right under the SVG Styles
comment flag, I'm going to create
5:43
a new grouped selector rule that
targets these three elements.
5:48
So first, I'll target the class outer,
5:52
followed by inner, then inline.
5:58
So now I'm gonna use the animation
shorthand property to define all of
6:02
the animation properties
in a single declaration.
6:07
So first, I'll reference
the grow keyframe sequence and
6:11
give it a one second animation duration.
6:15
And I also wanna give each
animation a timing function.
6:18
Now the value ease-out will start
the animation at full speed,
6:21
then ease it to a finish.
6:27
Next, I'll need to set the animation
fill mode to backwards.
6:29
The backwards fill mode immediately
applies the first animation
6:34
keyframe to the element, so
the values in the 0% keyframe here.
6:39
That way,
we make sure the scaling begins at 0 and
6:44
we don't get any strange
jumps in the animation.
6:47
So I wanna give the animations
a slight delay so
6:51
that they don't all run at the same time.
6:54
So I’m gonna create a rule that
targets the class inner, and
6:57
I’m going to delay its animation
with the animation-delay property.
7:02
Now I only want a little bit of
delay between the animations, so
7:09
I’ll give this one a value of 0.1 seconds.
7:12
Next, I'm going to
target the class inline.
7:17
And for this, I'm going to set
animation-delay to 0.15 seconds.
7:23
Finally, let's not forget to
define the SVG transform-origin,
7:29
so I need to give each svg
element I'm transforming
7:34
a transform-origin property
value set to the center.
7:38
Otherwise, the elements will not
scale from their center point.
7:42
Now to keep my CSS dry, I'm going
to define the transform-origin in
7:46
one place using the universal selector.
7:51
So right below the comment for SVG Styles,
I'm going to create a new rule
7:53
that targets the class badge,
followed by the universal selector.
7:58
This will target every
element inside the badge, and
8:03
apply the transform-origin
I'm about to write.
8:07
So as you learned in the previous stage,
8:10
you can set the transform-origin
to center, with the value 50% 50%.
8:13
Now to get this exact value in pixels,
you can go back to the HTML file and
8:19
look at the cx and cy coordinates for
the circle elements.
8:25
So as we can see here in
the first circle element, cx and
8:31
cy are both set to 180, so
you can use 180 as your pixel value.
8:36
Now I'm sticking with
percentages moving forward.
8:42
So let's go back to the browser and
check out our animations.
8:46
Once I click the Preview button, we can
see how the outer circle scales in first,
8:49
immediately followed by the inner
circle and the inline strokes.
8:54
And there's a nice, subtle follow-through
effect in the animation that renders
8:59
the movement more fluid and realistic.
9:03
This is done via the scale and
animation-delay values, really neat.
9:05
So our animation is looking good, so far.
9:10
In the next video,
we're gonna tackle the star animation.
9:13