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

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.

Update

Modern browsers may display the SVG star animation differently than shown in the video, even when using the exact same code. This is due to changes in how browsers calculate SVG transform origins since this course was originally recorded.

If your stars appear to “drift” or move while scaling/rotating, add the following transform-box rule to your CSS:

.stars * {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

This ensures transforms are calculated relative to each individual SVG shape rather than the entire SVG canvas, restoring the intended animation behavior.

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