2D Transforms and Transitions - Beginning CSS3 - page 453

transition-duration: 1s;
transition-delay: 2s, 1s, 0s ;
}
#box1:hover {
background-color: #006;
width: 150px;
height: 150px;
transition-delay: 0s, 1s, 2s;
}

The original timings have been copied into the :hover pseudo-class, but they have been reversed in the
#box1 style rule. When you hover over the box, the transition-delay timings in the pseudo-class override
those in #box1 . So, the sequence of transitions remains the same as before. However, when you move the mouse
pointer away from the box, the :hover pseudo-class no longer applies, and the timings in the #box1 style take
precedence. As a result, the height starts changing immediately, the width follows one second later, and finally
the color fades to red.

■ The same technique applies to timing-duration . for example, setting a two-second duration in the :hover
pseudo-class and a one-second duration in the normal state results in a slow transition when you hover over an
element, but a rapid one when you move the mouse pointer away.

Tip

Using the Shorthand Property
Instead of using the individual properties, you can define a transition in a single declaration with the transition
shorthand property. For a single property, just list the values separated by spaces. For example, the following
applies a one-second linear transition to background-color , delayed by a quarter of a second:

transition: background-color 1s 250ms linear;

When using the transition shorthand, the first time value is treated as transition-duration . The second
one represents transition-delay . If you don't want to delay the transition, use only one time value because the
default value for transition-delay is 0s .

■ To jump to the end state immediately after a delay, use a single time value equal to the length of the delay,
and set the timing function to step-end .

Tip

To apply the same transition values to all properties, just set the values you want to change from the initial
values listed in Table 20-3 . For example, if you want all properties to transition over half a second without a delay,
this is all you need:

transition: 500ms;

Alternatively, if you want to make it clear that all properties are affected, include the all keyword:

transition: all 500ms;

In both cases, the default ease timing function will be used.