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.