This is a pretty amazing technique that I learned about [thanks again to Codrops.](http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/) 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](http://jsbin.com/imunep/1), using the [Web Literacy Standard](https://wiki.mozilla.org/Learning/WebLiteracyStandard) 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.
**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](http://www.impressivewebs.com/css-selectors/): for explaining the how to select elements in CSS.
* [CSS Animations](http://www.the-art-of-web.com/css/css-animation/#.UgZfe5kYi-F): 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](http://daneden.me/animate/): a simple generator for fun CSS Animations. I used “bounceInDown”.
This is a pretty amazing technique that I learned about [thanks again to Codrops.](http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/) 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](http://jsbin.com/imunep/1), using the [Web Literacy Standard](https://wiki.mozilla.org/Learning/WebLiteracyStandard) 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](http://www.impressivewebs.com/css-selectors/): for explaining the how to select elements in CSS.
* [CSS Animations](http://www.the-art-of-web.com/css/css-animation/#.UgZfe5kYi-F): 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](http://daneden.me/animate/): a simple generator for fun CSS Animations. I used “bounceInDown”.