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

Course Overview

1:41 with Guil Hernandez

You can animate and interact with SVG just like you're able to do with HTML. SVG supports different methods for animation, but you're going to learn one of the most common methods: using CSS transitions, transforms, and keyframe animations.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [SOUND] Hey, everyone. 0:01
    I'm Guil, a friend and design teacher here at Treehouse. 0:04
    Did you know that SVG also supports interactivity and animation? 0:07
    In this course, I'm gonna teach you how to animate SVG or 0:12
    scalable vector graphics with CSS. 0:15
    In the SVG Basics course, 0:17
    you learned that SVG is made up of XML tags that render shapes and graphics. 0:19
    You also got familiar with the SVG markup language, how to optimize SVG and 0:24
    the variety of ways in which SVG content can be included in a web page. 0:29
    If you haven't watched SVG basics and don't have experience working with SVG, 0:33
    I highly recommend taking that course before continuing with this course, 0:37
    because we're about to build with those concepts. 0:41
    We can animate and interact with SVG, just like we're able to do with HTML. 0:43
    SVG supports different methods for animation, but 0:48
    we're gonna cover one of the most common methods using CSS transitions, 0:51
    transforms and keyframe animations. 0:56
    First, you're gonna learn how to animate shapes and SVG icons with CSS transitions 0:58
    and transforms, then you'll create an SVG animation sequence using CSS keyframes and 1:03
    animation properties. 1:08
    Finally, you're gonna learn how SVG line animation works by creating a line drawing 1:09
    animation using SVG stroke properties. 1:14
    There are many creative ways you can use SVG animations on your website, 1:17
    the possibilities are endless. 1:20
    For example, you can animate icons, create engaging user interface interactions, 1:22
    even build element animation sequences like this and more. 1:27
    So, I'm excited to get you started animating SVGs. 1:31
    So if you're ready to add surprise and delight to your web graphics with SVG and 1:35
    CSS animations, let's get to it. 1:39

    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