0Pricing
HTML Academy · Lesson

Animating SVG with CSS and SMIL

Add motion to SVG elements with CSS transitions and SMIL.

CSS Transitions on SVG

SVG presentation attributes (fill, stroke, opacity, transform) can be animated with CSS transitions. Add a class and define the transition: .icon { transition: fill 200ms ease; } .icon:hover { fill: red; }. CSS transitions work identically on SVG elements.

CSS Keyframe Animations on SVG

Apply @keyframes to SVG elements: animate stroke-dashoffset for path drawing effects, opacity for fade-in, transform for movement and rotation. The same animation syntax used for HTML elements applies to SVG elements without modification.

@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.path { stroke-dasharray: 100; animation: draw 1s ease forwards; }

All lessons in this course

  1. Inline SVG vs img and object
  2. Basic SVG Shapes rect circle path
  3. SVG viewBox and Responsive Scaling
  4. Animating SVG with CSS and SMIL
← Back to HTML Academy