Our next transition property is
transition-delay. Much like duration, its value is an amount of time. Delay specifies the time to wait before starting the transition. As with the duration property, the default value for
0s, which means no delay.
transition-property: width; transition-duration: 750ms; transition-delay: 250ms;
In the example above, a change in the width of the element will start after a quarter of a second, and it will animate over three quarters of a second.
Let’s use the
transition-delay property in a game! Find the gazelle in the picture to your right and move your mouse over it. Hint: It’s under a zebra’s head.
Find the transition rule that targets the gazelle and add a delay of three seconds.
Run the code and move your mouse over the gazelle again. This takes a long time, and a user might think they’ve guessed incorrectly.
Lessen the delay by changing the value to one hundred milliseconds.
Run the code and move your mouse over the gazelle again. This time it’s fast! A user could win this game by randomly moving their mouse around the picture.
Let’s try a different amount of time in between the last two for the delay, 0.75s. How does it feel?