Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

10. Creating Animated Infographics

This chapter investigates how to enhance infographics by adding CSS animations. It combines the techniques used in this book to create a data visualization of the ratio of different ingredients in six different kinds of mixed drinks. You will add animations to add movement to the infographic, simulating the drinks pouring into their glasses.

What Are Infographics?

Using infographics is an increasingly popular way to present data on the web. By using infographics, you can present data that may be difficult to understand in written or tabular form in a visual way—often through illustration—in order to make the meaning and significance of the data more immediately apparent.

Image-Based Infographics

A common approach ...