STRAIGHT-AHEAD VS. POSE TO POSE
In traditional animation, this is a choice in how to construct your animation.
The straight-ahead option is to draw out every frame in the sequence. The
pose-to-pose option is to create a few keyframes throughout the sequence,
and then ﬁll in the gaps later. Filling in these gaps is known as “in-
betweening,” or “tweening,” a familiar term for those used to animating in
With CSS animation, we typically use the latter, pose to pose. That is, we’ll
add keyframes of action, and then the browser will “tween” the intermediate
frames automatically. However, we can learn from the straight-ahead
technique, too. The browser can do only so many eﬀects; sometimes, you
have to do it the hard way and put in more animation hard-graft to get the
FOLLOW-THROUGH AND OVERLAPPING
Also known as physics! Follow-through and overlapping are more commonly
used in character animation for body movement, such as to show arms
swaying as the character drops them or long hair falling. Think of someone
with a big stomach turning quickly: their body will turn ﬁrst, and their bulging
gut will follow shortly after.
For us, this means getting the physics right when the ball drops. In the
demonstrations above, the ball drops unnaturally, as if beyond the control of
gravity. We want the ball to drop and then bounce. However, this is better
achieved through the next principle.
Smashing eBook #19│Mastering CSS3│ 184