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
Icons are a great way to get started with SVG animation because they're perfect for simple interactions like hover states. We'll start by creating a CSS transition that animates icon fill colors on :hover.
Quick Reference
Related Videos
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
First, I'm gonna show you how
to transition SVG properties,
0:00
using CSS transitions.
0:03
To follow along, simply launch the work
space associated with this video.
0:05
So, in my work space,
0:09
I have an HTML document containing
three separate SVG icons.
0:11
So, here is the mark up for a gear icon.
0:16
Below that I have the mark up for
a hammer icon, and then a Heart icon.
0:19
And in the style.css file,
I have a base rule that targets
0:25
the SVG elements and applies a fluid
width and a float for layout.
0:29
If I click my work space's Preview button,
we can see what the gear, hammer, and
0:35
heart icons look like in the browser.
0:39
Pretty nice looking icons.
0:41
These are actually three of the many SVG
icons used on the Treehouse homepage.
0:43
They were designed in
a vector drawing tool,
0:49
like Illustrator, Inkscape, or Sketch.
0:51
So icons are a great way to get
started with SVG Animation,
0:53
because they're perfect for
simple interactions, like hover states.
0:57
So let's start by
creating a CSS transition
1:01
that animates changes to
the icon fill colors on Hover.
1:05
You can target and style SVG just
like any other HTML element.
1:09
SVG uses different element tags
than what you'll find in HTML, and
1:14
there are some CSS properties
that are specific to just SVGs.
1:18
So before I create
the transitions here in my CSS,
1:23
I'm going to assign classes
to a few of my SVG elements.
1:26
This will make it easier to target and
style them later with CSS.
1:30
So first, in the SVG mark up for
the gear icon, I'm going to give the first
1:34
circle element here the class gear-bg.
1:41
This circle element is what draws the blue
circular shape behind the gear icon,
1:46
so the class name gear-bg
clearly communicates that.
1:52
So next, the adjacent path element here
defines the shape of the gear icon itself.
1:56
So I'm going to give it
the class gear-icon.
2:03
All right, so now I'll scroll down to the
hammer icon and add similar class names.
2:13
So I'm going to give the first
circle element the class hammer-bg,
2:18
and then I'll give the adjacent
path element the class hammer-icon.
2:24
Then I'll scroll down to the heart icon.
2:34
And give the first circle shape,
the class heart-bg.
2:39
And finally, I'll give the adjacent
path element a class heart-icon.
2:46
So now,
I can target these classes with CSS and
2:55
transition some of these
attributes on Hover.
2:59
Now the icon fill colors are being
applied with presentation attributes.
3:02
So for example,
the fill attributes in the circle elements
3:06
set the colors for
each of the circle shapes.
3:11
So, I'm going to transition each fill
color to a different color with CSS.
3:14
In my style sheet under the GEAR comment,
here,
3:23
I'm going to create a new rule that
targets the class gear-bg on Hover.
3:28
I wanna change the elements fill color
on Hover, so I need to use the SVG only
3:36
fill property, then I'll set the fill
color to a darker shade of blue using
3:42
the hex value 3881cc.
3:48
So, when I save my style sheet, and
refresh browser, we can see that on Hover,
3:55
the CSS overwrites the fill color defined
in the elements fill attribute, and
4:01
changes it to that dark shade of blue.
4:06
So, now I'm going to add a transition
to smooth out this abrupt color change
4:08
when I mouse over the gear and
then mouse off of the gear.
4:13
To transition the fill color on both
the hover on and hover off states,
4:18
I need to define a transition property for
gear-bg.
4:22
So, I'm gonna target the class gear-bg,
4:27
and then I'm going to add
a transition property.
4:29
And I'll set the transition
duration to 0.3 seconds, and
4:35
then I'll set the transition
timing function to ease-out.
4:39
That way, it starts the transition at
full speed, then eases to a finish.
4:44
All right, so let's take a look.
4:49
I'll go back to the preview,
hit refresh, and
4:50
when I hover over the circle,
it looks good.
4:54
I not only get a nice fill transition
on Hover, but also when I hover out.
4:57
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