Animation duration and delay in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the effect of this CSS animation code?

Consider the following CSS snippet:

@keyframes slide { from { left: 0; } to { left: 100px; } }
.box { position: relative; animation-name: slide; animation-duration: 2s; animation-delay: 1s; }

What happens when the page loads?

CSS

@keyframes slide { from { left: 0; } to { left: 100px; } }
.box { position: relative; animation-name: slide; animation-duration: 2s; animation-delay: 1s; }

A The box moves from left 0 to 100px immediately and takes 2 seconds.

B The box moves from left 0 to 100px over 1 second, then waits 2 seconds.

C The box moves from left 0 to 100px over 3 seconds without delay.

D The box waits 1 second, then moves from left 0 to 100px over 2 seconds.

💡 Hint

Think about what animation-delay does before the animation starts.

animation-delay pauses the animation start by the specified time (1s here). After that, animation-duration (2s) controls how long the animation runs.

🧠 Conceptual

intermediate

How does animation-delay affect multiple animations on the same element?

Given this CSS:

.circle { animation-name: grow, fade; animation-duration: 2s, 3s; animation-delay: 1s, 0s; }

Which statement is true?

CSS

.circle { animation-name: grow, fade; animation-duration: 2s, 3s; animation-delay: 1s, 0s; }

A The 'grow' animation starts after 1 second delay; 'fade' starts immediately.

B Both animations start immediately but have different durations.

C Both animations start after 1 second delay.

D 'fade' animation starts after 1 second delay; 'grow' starts immediately.

💡 Hint

Remember the order of values in animation-delay matches animation-name order.

animation-delay values correspond to each animation in order. Here, 'grow' waits 1s before starting; 'fade' starts immediately with 0s delay.

❓ rendering

advanced

What will be the visible effect of this CSS animation timing?

Analyze this CSS:

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.light { animation: blink 4s infinite; animation-delay: 2s; }

What does the user see when the page loads?

CSS

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.light { animation: blink 4s infinite; animation-delay: 2s; }

A The element is fully visible for 2 seconds, then starts blinking every 4 seconds.

B The element blinks immediately every 4 seconds with no delay.

C The element is invisible for 2 seconds, then blinks every 4 seconds.

D The element blinks every 2 seconds with no initial delay.

💡 Hint

animation-delay delays the entire animation cycle start.

The element stays fully visible during the 2-second delay, then the blinking animation starts cycling every 4 seconds.

❓ selector

advanced

Which CSS selector applies animation-delay only to buttons inside a nav?

You want to apply a 1.5s animation delay only to buttons inside a

element. Which selector is correct?

A .nav > button { animation-delay: 1.5s; }

B button nav { animation-delay: 1.5s; }

C nav button { animation-delay: 1.5s; }

D button > nav { animation-delay: 1.5s; }

💡 Hint

Think about the order and relationship between elements in selectors.

The selector 'nav button' targets all button elements inside any nav element. Other options either reverse the order or use class incorrectly.

❓ accessibility

expert

How should animation-delay be used to improve accessibility?

Which practice helps users sensitive to motion when using animation-delay in CSS?

A Avoid animation-delay and animations entirely for all users.

B Respect prefers-reduced-motion media query to disable or reduce animation-delay and animations.

C Use animation-delay only on background elements to keep focus on content.

D Use animation-delay with long delays to surprise users with sudden animations.

💡 Hint

Consider user preferences for reduced motion in settings.

Using the prefers-reduced-motion media query allows disabling or simplifying animations and delays for users who prefer less motion, improving accessibility.

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