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.