22: Animating SVG with CSS

(Updated on )

When you use inline SVG, all that SVG code is right in the HTML, and thus in the DOM. You can style them just like you would a <div>, <h1>, or any other HTML element. CSS styling brings the possibility of animations and transitions.

A simple example:

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen.

A wrote up how to tackle a slightly more complex design in this tutorial. Here’s that demo.

See the Pen Wufoo SVG Ad by Chris Coyier (@chriscoyier) on CodePen.

In this screencast we make another animated SVG advertisement for Wufoo, starting nearly from scratch. The design has some clouds in it that we animate to move by and repeat smoothly and endlessly.

At first, we used inline SVG and animated it with CSS just attached to the same HTML document. But then, just to showcase how it works, we moved that CSS to within the SVG itself, which is completely valid. The reason that you might want to do that is because then the animation can run even when you use the SVG as <img> or background-image.


See the Pen kKdDj by Chris Coyier (@chriscoyier) on CodePen.

Browser support for that animation will vary. At the time of this writing, it was working only in Chrome.