2D Transforms and Transitions - Beginning CSS3 - page 449

Specifying the Duration of the Transition
You specify the duration of the transition with the transition-duration property, which expects a single
duration or comma-separated list of durations. Times can be set in seconds ( s ) or thousandths of a second ( ms ).
If you specify just one value, the same duration applies to all properties being transitioned. If you supply
multiple durations, they're applied to the properties in the same order as they're listed in transition-property .
In the following example, all transitions take half a second:

transition-property: color, width, height;
transition-duration: .5s;

However, in the next example, color changes over half a second, while width and height take a full second
to transition to the next state.

transition-property: color, width, height;
transition-duration: .5s, 1s, 1s;

The number of values doesn't need to match. If transition-duration has more values than
transition-property , the excess durations are ignored. If there are fewer, the browser cycles through them
again. Take the following example:

transition-property: left, width, top, height;
transition-duration: 2s, 1s;

In this case, there are only two values for transition-duration , so the transition of the left property
takes two seconds, while width changes over one second. The browser then cycles through the durations again,
using two seconds for top and one second for height . If you add another property to transition-property , the
browser continues the cycle, and uses a two-second duration.

■ if you want a property to change instantly, you must use 0s or 0ms . omitting the unit of measurement
with a duration is invalid and causes the style to be ignored.

Caution

Setting the Pace of the Transition
The transition-timing-function property controls how intermediate values are calculated during the
transition. The property accepts one or more of the following values as a comma-separated list:

ease Starts slow, speeds up, and slows toward the end.
linear Transitions at an even pace throughout.

ease-in Starts slow and speeds up.
ease-out Starts fast and slows toward the end .

ease-in-out Similar to ease, but slower at each end.
cubic-bezier() Specifies a custom transition using a cubic-bézier curve.

step-start The change takes place at the beginning of the duration.
step-end The change takes place at the end of the duration.
steps() The change takes place in the specified number of equal steps.