Create animated and interactive infographics with CSS
Adding interactivity immediately makes infographics more appealing, especially if the reward is a spectacular animation. The core appeal and success criteria is the ability to visually represent the data in an easy, accessible manner. Varying the volume and dimensions of an object are just one way to illustrate data that changes, or to provide a comparison between different data elements.
Not all interactions will be obvious, especially where the data or illustration is complex. Signposts can be used within the design to help overcome any usability issues, and a careful choice of user interface elements will minimise potential user confusion.
Simple animations, like a cloud moving across the sky or a balloon floating can bring the page to life, encouraging visitors to experiment with the page and spend time exploring the information within.
Create a repeating CSS animation
CSS3 has brought the ability to create and fire animations in-browser, without external scripts or plug-ins. Animations don’t have to be triggered by user interaction, and can run indefinitely. This reduces the rendering load on the browser (as typically effects are rendered using your device’s GPU, where an equivalent JS effect wouldn’t, using more processor time, slowing the page).
Define the animation
CSS3 can now define preset animations that can then be applied to multiple elements. We can create different animations for different behaviours, each with a set of keyframes describing individual properties.
Apply the animation
Once the animation preset is complete, apply it to your element using the animation keyword, and specify the speed and amount of repeats the animation should make. You can specify infinite to run it forever.
Test the animation
As CSS3 is still being implemented, you’ll need to create multiple versions of each animation preset to use vendor prefixes. Provide a fall-back for old browsers, or consider it a progressive enhancement.
Animate according to scroll position
Create two graphics
This sky effect is achieved by overlaying two div elements, the same size, with different background images. Create two documents in Photoshop and apply gradient fills for your different skies.
Position and apply
Position the two divs> behind all your other content, and arrange them absolutely. As the window scrolls, we’ll reduce the opacity of the foremost