Animating SVG with CSS

Treehouse

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 Description
About this Course 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. What you'll learn
- Transitioning & Transforming SVG
- Animating SVG with keyframes
- Animated Line Drawings in SVG
About the Teacher
Guil is a front end web development teacher at Treehouse. You can follow him on Twitter at @guilh.

Course Description

About this Course 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. What you'll learn

Transitioning & Transforming SVG
Animating SVG with keyframes
Animated Line Drawings in SVG

About the Teacher
Guil is a front end web development teacher at Treehouse. You can follow him on Twitter at @guilh.

+
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
- Creating an SVG Animation Sequence 9:28
- Finishing the Animation Sequence 7:01
- Creating an Animated Line Drawing 4:56
- Animating stroke-dasharray and stroke-dashoffset 6:30
- The Animation Challenge 1:16
- The Animation Challenge Solution 4:10
- Keyframe and Line Drawing Animations Review 6 questions