Animation delay in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a 500ms delay before the animation starts.

Tailwind

<div class="animate-bounce [1]">Hello</div>

Drag options to blanks, or click blank then click option'

Aduration-500

Bdelay-500

Cdelay-50

Danimate-delay

Attempts:

3 left

💡 Hint

Common Mistakes

Using duration-500 sets animation length, not delay.

Using animate-delay is not a valid Tailwind class.

The delay-500 class adds a 500ms delay before the animation begins.

2fill in blank

medium

Complete the code to add a 1 second delay before the animation starts.

Tailwind

<div class="animate-spin [1]">Loading</div>

Drag options to blanks, or click blank then click option'

Adelay-100

Bduration-1000

Cdelay-10

Ddelay-1000

Attempts:

3 left

💡 Hint

Common Mistakes

Using delay-100 which is only 100ms delay.

Confusing duration-1000 with delay.

The class delay-1000 adds a 1000ms (1 second) delay before the animation starts.

3fill in blank

hard

Fix the error in the code to correctly add a 200ms animation delay.

Tailwind

<div class="animate-pulse [1]">Wait</div>

Drag options to blanks, or click blank then click option'

Adelay-2

Bdelay-20

Cdelay-200

Ddelay-02

Attempts:

3 left

💡 Hint

Common Mistakes

Using delay-20 which is 20ms, not 200ms.

Using delay-02 which is invalid.

The correct class for 200 milliseconds delay is delay-200.

4fill in blank

hard

Fill both blanks to create a div that spins with a 700ms delay and 2 second duration.

Tailwind

<div class="animate-spin [1] [2]">Loading</div>

Drag options to blanks, or click blank then click option'

Adelay-700

Bduration-2000

Cduration-2s

Ddelay-70

Attempts:

3 left

💡 Hint

Common Mistakes

Using duration-2s which is not a valid Tailwind class.

Using delay-70 which is 70ms, not 700ms.

delay-700 adds a 700ms delay, and duration-2000 sets the animation duration to 2000ms (2 seconds).

5fill in blank

hard

Fill all three blanks to create a pulsing animation with 300ms delay, 1.5 second duration, and infinite repeat.

Tailwind

<div class="animate-pulse [1] [2] [3]">Pulse</div>

Drag options to blanks, or click blank then click option'

Adelay-300

Bduration-1500

Cinfinite

Drepeat-infinite

Attempts:

3 left

💡 Hint

Common Mistakes

Using repeat-infinite which is not a Tailwind class.

Confusing duration and delay values.

delay-300 sets 300ms delay, duration-1500 sets 1.5 seconds duration, and infinite makes the animation repeat forever.

Practice

1. What does animation-delay do in Tailwind CSS animations?

easy

A. It changes the animation speed.

B. It waits before the animation starts.

C. It repeats the animation multiple times.

D. It stops the animation immediately.

Solution

1. Step 1: Understand animation-delay property

   The animation-delay property sets a delay before the animation begins after the element loads or is triggered.

2. Step 2: Compare options with animation-delay behavior

   Only waiting before the animation starts matches the animation-delay effect.

3. Final Answer:

   It waits before the animation starts. -> Option B

4. Quick Check:

   animation-delay = wait before start [OK]

Hint: Animation delay means wait time before animation starts [OK]

Common Mistakes:

• Confusing delay with animation duration
• Thinking delay repeats animation
• Assuming delay stops animation

2. Which Tailwind class correctly sets an animation delay of 500 milliseconds?

easy

A. delay-500

B. animation-delay-500ms

C. animate-delay-500

D. delay-05

Solution

1. Step 1: Recall Tailwind delay class syntax

   Tailwind uses delay-500 to set 500ms delay by default if configured.

2. Step 2: Check other options for correctness

   Classes such as animation-delay-500ms and animate-delay-500 are not valid Tailwind classes. delay-05 uses wrong format.

3. Final Answer:

   delay-500 -> Option A

4. Quick Check:

   Tailwind delay class = delay-500 [OK]

Hint: Tailwind delay classes use delay-[time] format [OK]

Common Mistakes:

• Adding 'animation-' prefix incorrectly
• Using units like 'ms' in class name
• Using decimal instead of full number

3. What will happen if you apply class="animate-bounce delay-1000" to a button?

medium

A. The button bounces immediately without delay.

B. The button never bounces because delay is too long.

C. The button bounces after 1 second delay.

D. The button bounces with faster speed.

Solution

1. Step 1: Understand animate-bounce and delay-1000

   animate-bounce triggers bounce animation; delay-1000 adds 1000ms (1 second) wait before animation starts.

2. Step 2: Predict animation behavior

   The button will wait 1 second, then start bouncing normally.

3. Final Answer:

   The button bounces after 1 second delay. -> Option C

4. Quick Check:

   delay-1000 means 1s wait before animation [OK]

Hint: delay-1000 means wait 1 second before animation starts [OK]

Common Mistakes:

• Thinking delay changes animation speed
• Assuming delay cancels animation
• Ignoring delay effect completely

4. You wrote <div class="animate-spin delay-2000ms"></div> but the delay does not work. What is the problem?

medium

A. Tailwind does not recognize 'delay-2000ms' because of 'ms' suffix.

B. The animate-spin class disables delay.

C. Delay must be set with inline style, not class.

D. The div needs an ID for delay to work.

Solution

1. Step 1: Check Tailwind delay class format

   Tailwind delay classes use numbers only, no units like 'ms'. So 'delay-2000ms' is invalid.

2. Step 2: Verify other options

   animate-spin does not disable delay; delay works with classes; IDs are not required.

3. Final Answer:

   Tailwind does not recognize 'delay-2000ms' because of 'ms' suffix. -> Option A

4. Quick Check:

   Tailwind delay classes do not include units [OK]

Hint: Tailwind delay classes never include units like 'ms' [OK]

Common Mistakes:

• Adding 'ms' or 's' units in class names
• Thinking animation disables delay
• Using inline styles instead of classes

5. You want three boxes to fade in one after another with 0.5s delay between each. Which Tailwind classes correctly apply this effect?

hard

A. animate-fadeIn delay-05, animate-fadeIn delay-10, animate-fadeIn delay-15

B. animate-fadeIn delay-500, animate-fadeIn delay-1000, animate-fadeIn delay-1500

C. animate-fadeIn delay-1, animate-fadeIn delay-2, animate-fadeIn delay-3

D. animate-fadeIn delay-0, animate-fadeIn delay-500, animate-fadeIn delay-1000

Solution

1. Step 1: Understand delay increments for staggered animation

   To fade in boxes one after another with 0.5s (500ms) delay between each, use delays of 0ms (first immediate), 500ms (second), 1000ms (third).

2. Step 2: Check Tailwind delay class naming

   Tailwind standard classes include delay-0, delay-500, delay-1000 which match the required increments.

3. Step 3: Eliminate incorrect options

   Combinations using delay-500, delay-1000, delay-1500 include non-standard delay-1500. Classes like delay-1, delay-2, delay-3 or delay-05, delay-10, delay-15 use invalid formats or values.

4. Final Answer:

   animate-fadeIn delay-0, animate-fadeIn delay-500, animate-fadeIn delay-1000 -> Option D

5. Quick Check:

   Staggered delays: delay-0, delay-500, delay-1000 [OK]

Hint: Tailwind stagger: delay-0, delay-500, delay-1000 for 0.5s steps [OK]

Common Mistakes:

• Using non-standard delays like delay-1500
• Invalid formats like delay-1 or delay-05
• Confusing delay increments