HTML and CSS Reference
In-Depth Information
doesn't begin transitioning until five seconds after element one started,
and element three's transition begins a further five seconds after that.
The code, from listing ch09/transition-delay-1.html, is identical to that
from ch09/transitions-3.html except for these two rules:
div div:nth-child(2) { transition-delay: 5s; }
div div:nth-child(3) { transition-delay: 10s; }
The most common use for
transition-delay
is to chain a number of
transitions together. If you want an element to first move and then
enlarge, you specify two transitions like this:
div {
transition-duration: 10s, 10s;
transition-delay: 0, 10s;
transition-property: top, transform;
}
The element will first transition the top value and then transition the
transform. You can see a full example in the code file ch09/transition-
delay-2.html. With
transition-delay
, it's possible to create multiple-step
animations, providing that at each step a different property is transi-
tioned. For a more complete approach to animation with
CSS
, see the
later section “CSS Animation.”
Triggering transitions with JavaScript
After a transition is defined on an element, any change in the computed
style will trigger the animation. This doesn't have to be due to a
