Why animations enhance interaction in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a smooth fade-in animation to a button using Tailwind CSS.

Tailwind

<button class="bg-blue-500 text-white py-2 px-4 rounded [1]">Click me</button>

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

Aanimate-fade-in

Banimate-fadeIn

Canimate-fade

Danimate-fadein

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect animation class names that do not exist in Tailwind.

Misspelling the animation class or using wrong capitalization.

The correct Tailwind CSS class for a fade-in animation is animate-fade-in. This class smoothly fades the button into view, enhancing user interaction by providing visual feedback.

2fill in blank

medium

Complete the code to add a hover scale animation effect to an image using Tailwind CSS.

Tailwind

<img src="image.jpg" alt="Sample" class="transition-transform duration-300 [1]">

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

Ahover:scale-110

Bhover:scale-up

Chover:scale

Dhover:scale-1.1

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid scale values like decimals or unsupported keywords.

Forgetting the hover: prefix to trigger animation on hover.

The class hover:scale-110 scales the image to 110% of its size on hover, creating a smooth zoom effect that draws user attention.

3fill in blank

hard

Fix the error in the Tailwind class to make the button pulse continuously.

Tailwind

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

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

Aanimate-pulse-forever

Banimate-pulse

Canimate-pulsing

Danimate-pulsate

Attempts:

3 left

💡 Hint

Common Mistakes

Using made-up animation class names that Tailwind does not support.

Adding extra suffixes like '-forever' which are not part of Tailwind.

The correct Tailwind class for a continuous pulse animation is animate-pulse. Other options are not valid Tailwind classes and will not work.

4fill in blank

hard

Fill both blanks to create a button that changes color smoothly and grows slightly on hover.

Tailwind

<button class="bg-red-500 text-white py-2 px-4 rounded transition [1] [2]">Hover me</button>

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

Aduration-500

Bhover:bg-red-700

Chover:scale-105

Dease-in-out

Attempts:

3 left

💡 Hint

Common Mistakes

Using scale classes instead of background color classes for hover color change.

Forgetting to add transition duration class.

The class duration-500 sets the transition duration to 500ms, and hover:bg-red-700 changes the background color on hover smoothly.

5fill in blank

hard

Fill all three blanks to create a card that fades in, moves up slightly, and grows on hover with smooth transitions.

Tailwind

<div class="bg-white p-6 rounded shadow-lg transition [1] [2] [3]">Card Content</div>

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

Aduration-700

Bhover:translate-y-[-5px]

Chover:scale-105

Danimate-fadeIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect syntax for translate values.

Forgetting to add transition classes for smooth effect.

animate-fadeIn makes the card fade in on load, hover:translate-y-[-5px] moves it up slightly on hover, and hover:scale-105 grows it a bit. Together with duration-700 (optional), these create a smooth interactive effect.