Using SVG with CSS3 and HTML5 — Supplementary Material

Example code and online extras for the O'Reilly Media book by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey.

Chapter 19
Transitioning in Time: Animation

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.

Even more than any other aspect of web design, planning for performance becomes particularly important in animation. If a browser takes too long to update a graphic, the transition between states can stutter and jerk, exhibiting jank, to use the animator’s term. Rather than enhancing your website, a janky animation can make it look broken—distracting and irritating your users instead of captivating them.

To avoid the dreaded jank, you’ll need to plan—and test—your animations carefully. There are often many ways to code a given effect, but browsers can optimize certain operations better than others.

Figures and Examples#

The file names link to the code view on GitHub. Beware: the linked screenshots are hi-resolution; some have very large file sizes.

View all files for this chapter on GitHub.

Unlabelled code snippet in the description of animation-timing-function
Examples from previous chapters referenced in the “CSS Keyframe Animations” section
Example 19-1. Enhancing a scripted SVG game with CSS animations and transitions

This is the CSS for Example 18-6, the final version of the game from Chapter 18.

Example 19-2. Simple animation using <animate>
Figure 19-1. Three stages of an infinite animation of shapes moving around a path
Example 19-3. Animating motion along a path
Unlabelled snippet in “Triggering Regular Updates” section
Example 19-4. Animating motion along a path, with JavaScript
Figure 19-X1. A simple logo, ready for animation
Figure 19-X2. Frames of a logo animation, at one-second intervals
Example 19-X1. Creating a complex animation sequence from synchronized animation elements
Figure 19-X3. Timing of triangular motion with linear versus paced calcMode
Figure 19-X4. Two X-ray views into Kurt’s skull (oh my!)
Example 19-X2. Creating complex transformation patterns with additive animations
Example 19-X3. Using accumulative repeats and spline easing to create a pulsed animation
Figure 19-X. Frames from an animated mask effect
Example 19-X4. An animated mask effect, by animating gradient stops within the mask
Example 19-X5. An animated mask effect, by animating the position of a gradient-filled rectangle within the mask
Figure 19-X6. The layers used to create an animated mask effect
Example 19-X6. An animated mask effect, by animating the opacity of multiple layers with different masks

Online Extras#