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.

Practice

1. What does the CSS property animation-duration control?

easy

A. How long the animation runs

B. When the animation starts

C. The color of the animation

D. The size of the animated element

Solution

1. Step 1: Understand the property purpose

   animation-duration sets the length of time an animation takes to complete one cycle.

2. Step 2: Compare with other properties

   animation-delay controls start time, not duration. Color and size are unrelated.

3. Final Answer:

   How long the animation runs -> Option A

4. Quick Check:

   animation-duration = length of animation [OK]

Hint: Duration means how long something lasts [OK]

Common Mistakes:

• Confusing duration with delay
• Thinking it changes color or size
• Mixing up start time and length

2. Which of the following is the correct syntax to set an animation delay of 2 seconds in CSS?

easy

A. animation-delay: 2s;

B. animation-delay = 2s;

C. animation-delay: 2;

D. animation-delay: '2s';

Solution

1. Step 1: Recall CSS property syntax

   CSS uses colon : to assign values, not equals =.

2. Step 2: Check value format

   Time values require units like s for seconds without quotes.

3. Final Answer:

   animation-delay: 2s; -> Option A

4. Quick Check:

   Correct CSS syntax uses colon and units [OK]

Hint: Use colon and units without quotes for CSS times [OK]

Common Mistakes:

• Using equals sign instead of colon
• Omitting time units
• Adding quotes around time values

3. Given this CSS animation:

div {
  animation-name: slide;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

When will the div start moving and how long will the movement last?

medium

A. Starts after 3 seconds delay and moves for 1 second

B. Starts immediately and moves for 3 seconds

C. Starts after 1 second delay and moves for 3 seconds

D. Starts immediately and moves for 1 second

Solution

1. Step 1: Identify animation-delay effect

   The animation waits 1 second before starting because of animation-delay: 1s;.

2. Step 2: Identify animation-duration effect

   The animation runs for 3 seconds as set by animation-duration: 3s;.

3. Final Answer:

   Starts after 1 second delay and moves for 3 seconds -> Option C

4. Quick Check:

   Delay = 1s, Duration = 3s [OK]

Hint: Delay waits, duration runs animation [OK]

Common Mistakes:

• Mixing delay and duration times
• Assuming animation starts immediately
• Confusing delay length with duration length

4. Identify the error in this CSS snippet:

.box {
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-name: fadeIn;
  animation-delay: 1s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

medium

A. animation-duration cannot be less than animation-delay

B. Two animation-delay properties; the last one overrides the first

C. animation-name must come before animation-duration

D. animation-delay value must be in seconds only

Solution

1. Step 1: Check for duplicate properties

   The CSS has two animation-delay lines; the second one (1s) overrides the first (500ms).

2. Step 2: Understand CSS property overriding

   In CSS, later declarations override earlier ones if they target the same property.

3. Final Answer:

   Two animation-delay properties; the last one overrides the first -> Option B

4. Quick Check:

   Duplicate properties override earlier ones [OK]

Hint: Last property wins if repeated in CSS [OK]

Common Mistakes:

• Thinking duration must be longer than delay
• Believing property order matters for validity
• Assuming delay must be seconds only

5. You want an animation to start 2 seconds after page load and run for 4 seconds. Which CSS snippet achieves this correctly?

hard

A. animation-duration: 4s; animation-delay: 0s;

B. animation-delay: 4s; animation-duration: 2s;

C. animation-duration: 2s; animation-delay: 4s;

D. animation-delay: 2s; animation-duration: 4s;

Solution

1. Step 1: Set the delay to 2 seconds

   The animation should wait 2 seconds before starting, so animation-delay: 2s; is correct.

2. Step 2: Set the duration to 4 seconds

   The animation should run for 4 seconds, so animation-duration: 4s; is correct.

3. Step 3: Verify order and values

   Order does not affect behavior, but values must match requirements exactly.

4. Final Answer:

   animation-delay: 2s; animation-duration: 4s; -> Option D

5. Quick Check:

   Delay 2s, duration 4s matches requirement [OK]

Hint: Delay first, then duration for timing [OK]

Common Mistakes:

• Swapping delay and duration values
• Setting delay longer than needed
• Assuming order changes effect