Animation duration and delay in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does animation-duration control in CSS animations?

animation-duration sets how long one cycle of the animation takes to complete.

For example, animation-duration: 2s; means the animation runs for 2 seconds.

beginner

What is the purpose of animation-delay in CSS?

animation-delay sets how long the browser waits before starting the animation.

For example, animation-delay: 1s; means the animation starts 1 second after the element appears.

beginner

How do you write an animation that lasts 3 seconds and starts after 2 seconds?

animation-duration: 3s;
animation-delay: 2s;

This means the animation waits 2 seconds, then runs for 3 seconds.

intermediate

Can animation-delay have negative values? What happens if it does?

Yes, animation-delay can be negative.

A negative delay means the animation starts partway through, as if it already ran for that time.

For example, animation-delay: -1s; starts the animation 1 second in.

beginner

If you want an animation to start immediately and run for half a second, what values do you use?

animation-delay: 0s;
animation-duration: 0.5s;

This means no waiting and a quick animation.

What does animation-duration specify?

A How many times the animation repeats

B How long before the animation starts

C How long the animation runs each cycle

D The speed of the animation in frames per second

animation-duration controls the length of one animation cycle.

If you want an animation to wait 3 seconds before starting, which property do you use?

A animation-wait: 3s;

B animation-duration: 3s;

C animation-start: 3s;

D animation-delay: 3s;

animation-delay sets the wait time before the animation begins.

What happens if animation-delay is set to -2s?

A Animation starts immediately but 2 seconds into the animation

B Animation starts 2 seconds late

C Animation does not run

D Animation runs twice as fast

Negative delay means the animation starts partway through, as if it already ran for that time.

Which unit is valid for animation-duration?

A em

B seconds (s)

C percent (%)

D pixels (px)

animation-duration uses time units like seconds (s) or milliseconds (ms).

If you want an animation to start immediately and last 1 second, what is the correct CSS?

A animation-delay: 0s; animation-duration: 1s;

B animation-delay: 1s; animation-duration: 0s;

C animation-delay: 1s; animation-duration: 1s;

D animation-delay: 0s; animation-duration: 0s;

Zero delay means start immediately; duration sets how long it runs.

Explain how animation-duration and animation-delay work together in CSS animations.

Think about waiting time and running time for an animation.

Describe a real-life example where you might want to use animation-delay in a web page.

Imagine how animations appear one after another on a page.