HTML and CSS Reference
Tra n s i t i o n /a n i m at i o n t i m i n g f u n c t i o n s
are modeled on cubic Bézier curves
( Figure 5.19 ), which you'll be familiar
with if you have studied math(s) to a
high level. For us nonmathematicians,
the actual maths is complicated
Bézier_curve). But basically, in the
context of transitions and animation,
Bézier curves site on a graph with
time on the X axis and progression
on the Y axis. The start and end of
the graph have control handles
attached to them, which control the
shape of the curve. Shallower parts of the curve equate to slow movement,
and steeper parts produce faster movement.
If this is hard to visualize, head over to http://cubic-bezier.com by Lea Verou,
which is a fantastic site that allows you to create your own curves by drag-
ging the control handles around, playing sample animations to give you an
idea of the effect these curves have, and importing, exporting, and sharing
FIGURE 5.19 A cubic Bézier curve.
The available values you can use (modeled on cubic Bézier curves) are:
linear . The transition happens at the same rate from beginning to end.
ease . The default value; the transition starts quickly and then gradually
ease-out . The transition starts quickly, stays quick for longer than ease,
and then slows down more abruptly at the end.
ease-in . The transition starts off slowly and then speeds up toward the end.
ease-in-out . The transition starts off by accelerating, is quite fast for most
of the duration, and decelerates toward the end.