Animating an SVG image with CSS

This is a pretty amazing technique that I learned about thanks again to Codrops. You can take any SVG image file and use CSS to design and animate those graphical elements.

It’s a smart way to make an interactive infographic.

I remixed the Codrops tutorial and made the page below, using the Web Literacy Standard graphic as a basis. It triggers an animation when the page loads, and when you hover over the title elements, they also have some transitions.

Web Literacy Standard

The trick is grouping and naming the objects in your SVG editor (I used Inkscape) and then editing those objects in your CSS.

These sites where also helpful in making this:

  • Defining CSS selectors: for explaining the how to select elements in CSS.
  • CSS Animations: for clear examples of using CSS animations and most interestingly, how you could hover over one element to trigger an animation for another element. I’d like to try that next!
  • Animate.css: a simple generator for fun CSS Animations. I used “bounceInDown”.