HTML and CSS Reference

In-Depth Information

CUBIC

BÉZIER

CURVES

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

your curves.

Time

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

slows down.

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.