Transitions and Animations 169Output percentageInput percentage0.50.5 1.01.0P 0P 1P 2P 3Figure 14-1: An example of a cubic Bézier curve
Figure 14-1 shows the four points mapped onto the grid to create a
Bézier curve. The coordinates of each point are shown in Table 14-1.
table 14-1: The Coordinate Points
Used to Plot a Bézier Curve
Point Coordinates (x, y)
P 0 (0, 0)
P 1 (0. 6, 0 .1)
P 2 (0. 15, 0 .7)
P 3 (1. 0, 1 .0)You would use the following CSS to represent this curve (remember, you
don’t need to define P 0 and P 3 because they always have the same values):
E { transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, 0.7); }
A linear animation progresses in a straight line from (0, 0) to (1, 1),
but this example animation follows the progression of the curve toward the
final point over the set duration. If you imagine the duration to be 1 sec-
ond, you can see the speed gradually increases at the start, between 0 and
(roughly) 0.5 seconds, and then increases sharply to about 0.7 seconds, and
then assumes a slower rate until the end of the animation.
All of the transition-timing-function keywords described earlier are pro-
duced with cubic Bézier curves. Table 14-2 shows each of the keywords and
their corresponding values for the cubic-bezier() function.