CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionSDelaying and Combining Transition Effects
A transition event can be delayed by adding a transition-delay, either as a separate property or appended to
the values for transform:
-moz-transition: 2s 4s;
-webkit-transition: 2s 4s; -o-transition: 2s 4s; transition: 2s 4s;
Note that the delay takes effect at both the start of the animation and the start of the element’s reversal to its
beginning point. The animation will not begin until four seconds after the cursor has been held over the image;
once it is fully rotated, the element will stay in place for four seconds before returning to its default orientation.
(Also note that the animation will not begin until the mouse has been held over the image for at least four
seconds).
You can animate several CSS properties at the same time by adding them to the :hover state (see Listing 2-16).
Listing 2-16. Several CSS Properties Transitioned Simultaneosly
The properties can be given separate timings in the animation by stating transition-duration as a separate
property with comma-separated values. Let’s say you wanted to move the image to the right on hover, and fade it
out at the same time, but with the fade taking half the time that the movement does (see Listing 2-17).
Listing 2-17. A CSS3 Transition of Multiple Properties with Different Timings for Each