Chapter 5
CSS3 Keyframe Animations
For creating simple animations of elements between two states, CSS transitions are easy to implement and
use, but this simplicity comes with several significant limitations. To create more complex animations with a
greater degree of control you need the CSS Animations module. I’ll refer to the animations created by the CSS
Animations Module as keyframe animations to further distinguish them from transitions.
If you are more familiar with animation tools like Flash, or come from a video or film background, the
time-based, “frameless” approach that CSS keyframe animations use may seem a little confusing at first. To ensure
that everyone starts with the same understanding, I’ll define keyframes and tweening, then look at how they are
implemented by the CSS Animations module.
Keyframes and Tweening
Modern animation has inherited the terminology and processes of traditional hand-drawn, cel-shaded animation
developed by Disney and other animators in the early 20th century. After character studies, sketches, and a script
were completed, animation development went something like this:
- The major frames of a sequence were drawn by a supervising animator. (At the Disney
Studios, this would probably have been one of the “Nine Old Men,” master animators
who created the establishing shots.) In a feature like Dumbo, for example, a sequence
in which Dumbo tries to fly by flapping his ears might include two keyframes: one
frame with Dumbo’s ears up, the other with his ears down. - Confining the animation to only these two frames, however, would have made the
sequence look extremely jerky (or made Dumbo appear to fly like a hummingbird).
To create a smoother animation sequence, the keyframes were handed off to an
“inbetweener,” a lower-level animator who would draw the intermediate frames
required, using the first and last keyframe as a reference. This process became
known as tweening. - The complete sequence would be inked, colorized, and aligned. Played back at 24
frames per second, the transition between each drawing would appear fluid, creating
a seamless animation.
Today, you are the master animator, with the browser taking the role of inbetweener. Creating a good
CSS3 animation is a matter of providing the browser with complete keyframes with enough information to
tween smoothly between them. The browser is obliged to make a number of assumptions when tweening. Poor
animations are usually the result of not supplying the stylesheet with enough information about the elements,
or making assumptions that are contrary to those built into CSS3.