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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.