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

Well done!

You have completed Animating SVG with CSS!

Sign up for Treehouse Back to Library

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

    To follow along, simply launch the work space associated with this video. 0:00
    So, in my work space, 0:00
    I have an HTML document containing three separate SVG icons. 0:02
    So, here is the mark up for a gear icon. 0:07
    Below that I have the mark up for a hammer icon, and then a Heart icon. 0:10
    And in the style.css file, I have a base rule that targets 0:16
    the SVG elements and applies a fluid width and a float for layout. 0:20
    If I click my work space's Preview button, we can see what the gear, hammer, and 0:26

    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