2D Transforms and Transitions - Beginning CSS3 - page 451

#steps4 {
transition-timing-function: step-end;
}
The transition-duration property is set to a deliberately long five seconds. The first two <div> elements
use the steps() function to change the color in five discrete steps. However, the timing is affected by the second
argument. The first <div> uses start , so the color immediately changes to the first intermediate shade. In the
next <div> , the second argument is end . As a result, the color doesn't change until the first second has passed.
The last two <div> elements use the step-start and step-end constants. The first changes color
immediately on mouseover and mouseout. The last one doesn't change unless the mouse pointer is held over it
for the full five seconds. When you mouse away from the <div> , it doesn't revert to light gray until five seconds
have passed.
Delaying the Transition
By default, transitions start immediately, but you can use the transition-delay property to delay the whole or
part of a transition. Like the other transition properties, it accepts a single time value or a comma-separated list
of values. A single value applies to all properties being transitioned. A list of values is applied to properties in the
same order as they're listed in transition-property .
Delaying a property's transition by the same amount as the previous property's duration creates a sequence
of changes. For example, the styles in transition-delay.html change the background color, width, and height of a
box on hover like this:
#box1 {
width: 100px;
height: 100px;
background-color: #F00;
margin: 10px;
transition-property: background-color, width, height;
transition-duration: 1s;
transition-delay: 0s, 1s, 2s;
}
#box1:hover {
background-color: #006;
width: 150px;
height: 150px;
}
The #box1 style rule sets the duration for each transition to one second, but transition-delay has three
values. As a result, the transition on background-color starts as soon as you hover over the box, and it takes
one second to change from red to navy blue. The width transition is delayed by one second, so it waits until
the color has finished changing before gradually making the box 50px wider. The height transition is delayed
by two seconds, so it starts making the box taller only after the other transitions have completed. So, although
transition-duration is 1s , the overall sequence takes three seconds.
Figure 20-16 shows the three phases of the transition. Notice that the top-left corner of the box remains fixed
throughout each phase and that the text moves down when the box increases in height. Unlike the example in
Figure 20-12 , there's no need to use the transform-origin property, and the text is not obscured. However, the
browser needs to reflow the page layout continuously, which is more processor intensive than using the scale()
transform function and could affect battery consumption on a mobile device.