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 transition-delay is 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.

In the .game .gazelle ruleset, add a delay of 400ms.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?