Our last 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.
Right now the gazelle immediately begins the transition to the new state when the mouse hovers over it. Let’s add a delay to make the game a little more interesting.
.game .gazelle ruleset, add a delay of 400ms.