Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Animating SVG with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Transitioning SVG Properties

5:03 with Guil Hernandez

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.

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up