Using SVG with CSS3 and HTML5

Chapter 19. Transitioning in Time

Chapter 19. Animation

An interactive web graphic is, by definition, animated, in the sense that it changes over time. But not all changes are created equal.

The interaction examples in Chapter 18 mostly involved simple switches between different states: one moment, the graphic was in one state, and the next moment, it had changed. Although this is technically animation, it skips the most interesting aspects of animated SVG graphics: the ability to show a transition between two states. This transition (also known as tweening or interpolation) can greatly enhance the user’s understanding of a change, making it easier to comprehend a new state or fresh information.

Even without interaction, animation can enhance many graphical elements, focusing the user on one area of the screen, or emphasizing the relationships between different components. Extend those little animated moments and connect multiple animations together, and you can create a complete animated short film in SVG.

We’ve used animation in a few examples so far, but have not really discussed what it means to animate a vector graphic, or how to plan a project that involves animation.

This chapter runs through your options for creating animated SVG. It is neither a detailed look at designing dynamic graphics, nor a comprehensive introduction to any of the animation techniques. Instead, it tries to lay out the options so you can decide which approach is appropriate for the project at hand. ...