Bounce animation (attention) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a bounce animation to the button using Tailwind CSS.

Tailwind

<button class="[1]">Click me</button>

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

Aanimate-bounce

Btext-center

Cbg-blue-500

Dp-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding or background color classes instead of animation classes.

Forgetting to include the animation class.

The class animate-bounce adds a bounce animation to the element in Tailwind CSS.

2fill in blank

medium

Complete the code to make the bounce animation repeat infinitely.

Tailwind

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

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

Aduration-500

Bdelay-100

Cinfinite

Drepeat-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using duration or delay classes instead of repetition classes.

Using a non-existent class like repeat-2.

The class infinite makes the animation repeat forever in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply the bounce animation on hover.

Tailwind

<span class="hover:[1]">Hover me</span>

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

Aanimate-hover

Bhover-bounce

Cbounce

Danimate-bounce

Attempts:

3 left

💡 Hint

Common Mistakes

Using just bounce without animate- prefix.

Using non-existent classes like hover-bounce.

To apply bounce animation on hover, use hover:animate-bounce. The class animate-bounce is required.

4fill in blank

hard

Fill both blanks to create a red button that bounces infinitely on hover.

Tailwind

<button class="bg-[1]-500 text-white px-4 py-2 rounded hover:[2]">Bounce</button>

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

Ared

Bblue

Canimate-bounce

Danimate-spin

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong color name or animation class.

Using animate-spin instead of bounce.

The button background is red using bg-red-500. The bounce animation on hover is hover:animate-bounce.

5fill in blank

hard

Fill all three blanks to create a green text that bounces and repeats infinitely.

Tailwind

<p class="text-[1]-600 [2] [3]">Attention!</p>

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

Agreen

Banimate-bounce

Cinfinite

Dduration-1000

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong color or animation classes.

Forgetting the infinite repetition class.

The text color is green with text-green-600. The bounce animation is animate-bounce with infinite repetition using infinite.