Skip to Content
Learn
CSS Transitions
Delay

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 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.

Instructions

1.

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.

2.

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.

3.

Let’s try a different amount of time in between the last two for the delay, 0.75s. How does it feel?

Folder Icon

Take this course for free

Already have an account?