172 Chapter 14
transition-delay
The final property in the transition-* family is transition-delay, which sets
the time when the transition starts. Here’s the syntax:E { transition-delay: time; }As with transition-duration, the time value is a number with a unit of
either milliseconds (ms) or seconds (s). The default value is 0 (zero), mean-
ing the transition happens as soon as the trigger is... well, triggered. Any
other positive value starts the transition after the specified length of time
has passed.
For example, if you wanted to set a delay of a quarter of a second at the
start of the example transition, here’s the code you would use:h1 {
font-size: 150%;
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 250ms;
}You can also use negative values for transition-delay, which has an
interesting effect: The transition begins immediately but skips ahead by
the amount of the negative value. To illustrate what I mean, let’s consider a
transition with a duration of 4s but a delay of -2s:E {
transition-duration: 4s;
transition-delay: -2s;
}When triggered, the transition starts immediately, but as if two seconds
had already passed (two seconds being the duration minus the delay). In
this case, the animation would start halfway through the transition.The transition Shorthand Property
Throughout this section, I’ve built an example transition property by prop-
erty. So far, the code looks like this:h1 {
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 250ms;
}