MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Animating SVG with CSS

Course Summary

SVG (Scalable Vector Graphics) also supports interactivity and animation, so you can animate and interact with SVG like you're able to do with HTML. This short course covers the most common methods for animating SVG: CSS transitions, transforms, and keyframe animations.

  • +

    Course Syllabus

    Transitions and Transforms

    Learn how to animate SVG icons, using CSS transitions and transforms. 9 steps
    • Course Overview 1:41
    • Intro to SVG Animation 2:21
    • Transitioning SVG Properties 5:03
    • Fill and Stroke Transitions 3:38
    • Grouping and Transforming SVG 6:30
    • Rotating and Scaling SVG 3:50
    • Transitions and Transforms Review 7 questions
    • Transform Origin in Firefox 3:16
    • Transitions and Transforms 6 objectives

    Keyframe and Line Drawing Animations

    Learn how to create an SVG animation sequence, using CSS @keyframes rules and animation properties. You will also learn the concept behind SVG line animation. 7 steps

Course Fee:
USD 25

Course Type:


Course Status:



1 - 4 hours / week

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url