How to animate SVG elements with CSS — color changes, line drawing, transforms, and performance.

SVG elements can be animated with standard CSS — the same transitions, transforms, and keyframes you use for HTML elements. This makes SVG ideal for loading spinners, hover effects, and micro-interactions.

CSS Properties That Work on SVG

The most useful CSS properties for SVG animation: fill, stroke, stroke-dasharray, stroke-dashoffset, opacity, transform (translate, rotate, scale). These can all be animated with transition or @keyframes.

Example: Hover Color Change

Set fill with a transition on an inline SVG path. On hover, change the fill to a new color — the transition animates the color shift smoothly.

Example: Line Drawing Effect

The famous "line drawing" animation uses stroke-dasharray and stroke-dashoffset. Set dasharray equal to the path length, offset equal to the path length (hiding the stroke), then animate offset to 0 — the path appears to draw itself.

Performance Tips

  • Animate transform and opacity for best performance (GPU-accelerated)
  • Avoid animating fill on many elements simultaneously
  • Use will-change: transform for complex animations

Need SVG assets to animate? Convert your PNG graphics to SVG first, then add CSS animations.