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

The Animation Challenge

1:16 with Guil Hernandez

We've covered a lot of material so far, and you're ready to start creating SVG animations with CSS on your own. In this animation challenge, you will create an SVG animation sequence using CSS transforms, keyframes, and animation properties.

To work on this challenge, launch the Workspace for this video or download the project files.

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

    We've covered a lot of material so far, and 0:00
    you're ready to start creating SVG animations with CSS on your own. 0:02
    So now it's time for you to create a simple SVG animation sequence 0:07
    using CSS transforms, key frames, and animation properties. 0:10
    You'll see a link to the files you need to create this animation challenge 0:15
    in the teacher's notes of this video. 0:18
    So first, let's plan the animation sequence. 0:20
    What are you gonna animate, and what are the different steps of the animation? 0:23
    So, this is the animation sequence I want you to create. 0:27
    In this animation, there are seven separate steps. 0:30
    So the first three steps are the slide movements of the three stars. 0:34
    They each slide up at different times. 0:38
    The next three steps are the pulsing animations. 0:41
    Each star scales and rotates while their fill color transitions to a light yellow. 0:45
    Finally, we see a light stroke animating around the circle shape. 0:51
    In the HTML file, I've already provided the class names for each element. 0:56
    So now it's your turn to create the animations in the style sheet. 1:01
    This animation challenge is a great way to practice what you've learned so far. 1:08
    In the next video I'll show you how I did it. 1:12
    Have fun. 1:14

    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