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
You 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.
Quick Reference
- @keyframes
- animation
- animation-fill-mode
- animation-timing-function
- CSS Transitions and Transforms – Treehouse course
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
[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
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