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 Solution

4:10 with Guil Hernandez

This animation challenge is a great way to practice what you've learned so far. In this video, I'm going to show you my solution to the challenge.

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.

Quick Reference

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

    So, how'd it go? 0:00
    I hope you were able to create an SVG animation sequence similar to this. 0:01
    Even if you created some parts of the animation sequence, that's great. 0:06
    So now I'm gonna show you one way of doing this. 0:10
    So in my style sheet, I created three key frame rules and 0:13
    named the animation slide, grow and off set. 0:17
    So the slide animation uses three key frames to create 0:22
    that slide up motion of the stars. 0:26
    Instead of creating the slide movement by animating the star's position, margin, 0:31
    or padding. 0:35
    I used a transform with the translate 3D function in each key frame. 0:36
    The second value in the translate3d function is what translates or 0:43
    moves the element on the y axis. 0:47
    Now translate3d is a hardware-accelerated function. 0:50
    This makes the animation play a whole lot smoother in the browser. 0:53
    You can read more about hardware acceleration in the Teachers Notes. 0:57
    So next, the grow animation is very similar to the one we created earlier for 1:01
    the badge animation. 1:06
    I'm using the rotate and scale transform functions. 1:08
    To create that pulsing effect in the stars. 1:12
    I'm also animating the elements opacity to one and fill color to yellow here at 50%. 1:15
    Right below this rule, the offset animation 1:22
    animates the circle element's stroke-offset property to zero. 1:25
    Just like we did earlier with the Treehouse logo. 1:30
    It also animates the stroke opacity to one in the 60% key frame. 1:33
    So I didn't need to create seven different keyframe rules 1:39
    to make this animation work. 1:43
    Like we did earlier, 1:45
    I'd used animation delay values to create the different animation start times. 1:46
    So in my SVG styles, I'm setting transform-origin to center, 1:52
    because all my transforms need to scale and rotate from their center. 1:57
    And I figured out that the total length of this circle shape is 815 pixels. 2:02
    So, to create the final line animation. 2:08
    I set stroke-array and stroke-offset to 815. 2:11
    Then called that offset key frame animation here in the animation property. 2:15
    So right below in the star rule. 2:22
    I gave the star elements a translate 3D of 180 pixels on the y axis. 2:25
    This is how they're able to slide up from the bottom of the circle. 2:31
    And then I call the slide and grow animations with the animation property. 2:37
    So like we did earlier in the badge animation. 2:42
    I staggered the star animations by giving each element an animation delay, 2:44
    using an nth-of-type selector. 2:50
    And that's pretty much it. 2:54
    Now you probably did things a little bit differently, and 2:56
    that's okay since there's no 100% right way of doing this. 2:59
    It's just the method I used. 3:02
    So keep up the good work. 3:04
    And if you want, 3:06
    you can share your new animation sequence with other students on our forum. 3:06
    As you learned throughout this course, SVG animations are fun and interesting. 3:14
    As web designers, we should be excited about the current state and 3:19
    future of SVG Animation, because it's an increasingly important part of web design. 3:22
    The methods I covered should give you lots of new ideas for 3:27
    using SVG animations in your project. 3:29
    So to practice what you've learned in this course. 3:32
    You can replace some of the graphics on your website with SVG, 3:34
    then add simple animations. 3:37
    Or try adding other transform functions like translate, and 3:40
    skew to the animation sequence you created earlier. 3:43
    Or you can use an existing SVG you like. 3:46
    And bring it to life with a little animation. 3:49
    You can even use the SVG graphics on the Treehouse website, like I did. 3:51
    We're always here to help, so if you have any questions about SVG transitions, 3:55
    transforms, animations, or anything else we covered in this course. 3:59
    Feel free to reach out to the wonderful Tree House community on our forum. 4:02
    Or you can get ahold of me on Twitter. 4:06
    I'm @GilH. 4:07
    Thanks everyone. 4:08

    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