168 Chapter 14
transition-timing-function
To control the manner in which an element transitions between states, you
use the transition-timing-function property. This property allows for varia-
tions in speed along the duration of the transition, which gives you control
over the animation’s pace. This property has three different value types:
a keyword, the cubic-bezier() function, or the steps() function. I’ll discuss
those two functions in detail, but to begin, I’ll focus on the keywords.Timing Function Keywords
The syntax of the transition-timing-function property when used with a key-
word is quite straightforward:E { transition-timing-function: keyword; }The possible keyword values are ease, linear, ease-in, ease-out, and
ease-in-out. The default value is ease, which starts slowly, accelerates quickly,
and slows down again at the end. The linear value progresses steadily from
the start of the transition to the end, with no variation in speed. With the
ease-in value, the animation begins slowly and then speeds up toward the
end, and the ease-out value acts in reverse. Finally, ease-in-out starts slowly,
speeds up through the middle, and then slows down again at the end, simi-
lar to—but less dramatic than—the ease value.
With that explained, let’s add a simple timing function to the example
transition:h1 {
font-size: 150%;
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: ease-out;
}The Cubic Bézier Curve
If you want finer control over the transition-timing-function property, you
should use the cubic-bezier() function. In case you’re not familiar with
cubic Bézier curves—and indeed, why would you be?—allow me to explain.
First, here’s the syntax:E { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }A cubic Bézier curve is a smooth, continuous curve that passes through
four points plotted on a grid that goes from 0 to 1 along both axes. The four
points are known as P 0 , P 1 , P 2 , and P 3. They define curvature and are plot-
ted with pairs of (x, y) coordinates, where the first (P 0 ) is always at (0, 0)
and the last (P 3 ) is always at (1, 1). The other two points are defined in the
function: (x1, y1) and (x2, y2). An example, shown in Figure 14-1, illustrates
this best.