2D Transforms and Transitions - Beginning CSS3 - page 452

Figure 20-16. Each transition is delayed to execute in sequence

■ it's generally recommended to define the transition properties in the style rule that governs the element
in its normal state. Doing so allows you to apply the same values to all transitions that affect the element even if
they're triggered in different ways, such as a different pseudo-class or by Javascript.

Note

When you move the mouse away at the end of the sequence, the delays are executed in the same order.
First the color changes back to red, the width begins to shrink one second later, and finally the height is reduced.
The sequence is abandoned if you move the mouse away before the end, but the order of returning to the
original state is the same as before. In other words, the color changes first, followed by the width.
The transition-duration property also accepts negative values. This starts the transition immediately, but
as though it had already started at the specified offset. Take the following example:

transition-property: width;
transition-duration: 1s;
transition-delay: -500ms;

If the transition changes width from 100px to 200px , it starts at the point that would have been reached over
half a second—in other words, about 150px (the actual value depends on the pace of the transition).

Changing the Reverse Transition
As the example in transition-delay.html in the preceding section demonstrates, transition delays are executed in
the same order when the element returns to its normal state. In many cases, this is unlikely to cause a problem.
But if you want to run a sequence of transitions in reverse, it's quite easy to do.
All that's needed is to define transition-delay in two places:

• The timings for the forward sequence go in the style rule that define the state after the

transition, for example in the :hover pseudo-class.

• The timings for the reverse sequence go in the style rule that defines the element's

normal state.

The styles in reverse_sequence.html adapt the previous example like this:

#box1 {
width: 100px;
height: 100px;
background-color: #F00;
margin: 10px;
transition-property: background-color, width, height;