2D Transforms and Transitions - Beginning CSS3 - page 450

As with transition-duration , a single value is applied to all transitions. If you specify multiple values
as a comma-separated list, they're applied in the same order to the individual properties listed in
transition-property . Excess values are ignored, and if you specify fewer transition-timing-function values
than properties, the browser cycles through them.
The first five keywords in the preceding list are constants for easing functions based on a cubic-bézier curve.
If you've used Flash, you'll be familiar with the concept of easing , which varies the pace of a transition (or tween,
as it's called in Flash). The cubic-bezier() function allows you to customize the pace. It takes four arguments
like this:

cubic-bezier(x1, y1, x2, y2)

Both x1 and x2 must be in the range 0-1. The y1 and y2 values can exceed that range.

■ There's a Css cubic-bezier builder at www.roblaplaca.com/examples/bezierBuilder . it not only
generates a cubic-bézier curve, but it also shows how it compares in action with the predefined constants.

Tip

The steps() function takes two arguments: the number of discrete steps in the transition and the keyword
start or end . If you omit the second argument, it defaults to end . To demonstrate how the function and the
related step-start and step-end constants work, step.html has four identical <div> elements with a light gray
background color. The :hover pseudo-class changes the background color to a very dark gray, as shown in
Figure 20-15 .

Figure 20-15. Each square changes color at a different pace

The page contains the following style rules:

div {
/* Other styles omitted */
background-color: #CCC;
transition-duration: 5s;
}
div:hover {
background-color: #333;
}
#steps1 {
transition-timing-function: steps(5, start);
}
#steps2 {
transition-timing-function: steps(5, end);
}
#steps3 {
transition-timing-function: step-start;
}