Animating SVG with CSS Course (How To)

Transitions and Transforms

Learn how to animate SVG icons using CSS transitions and transforms.

• 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.

• Creating an SVG Animation Sequence

  9:16

• 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