Bounce animation (attention) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this Tailwind CSS code visually do?

Look at this HTML snippet using Tailwind CSS classes. What animation effect will the blue button show when viewed in a browser?

Tailwind

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded animate-bounce">Click me</button>

A The button will fade in and out slowly.

B The button will smoothly bounce up and down repeatedly.

C The button will spin continuously.

D The button will shake left and right quickly.

💡 Hint

The class 'animate-bounce' in Tailwind triggers a vertical bouncing effect.

The animate-bounce class in Tailwind CSS applies a keyframe animation that moves the element up and down repeatedly, creating a bouncing effect.

❓ selector

intermediate

Which Tailwind class controls the speed of the bounce animation?

You want to set the bounce animation duration to 1000ms. Which Tailwind CSS class should you add or change?

A duration-1000

B animate-slow

C speed-bounce

D animate-duration

💡 Hint

Tailwind uses duration classes to control animation speed in milliseconds.

The duration-1000 class sets the animation duration to 1000 milliseconds (1 second).

🧠 Conceptual

advanced

Why is using animate-bounce good for attention but bad for accessibility if overused?

Consider a webpage with many elements using the bounce animation. What is a key accessibility concern?

A Bounce animations cause the page to lose color contrast.

B Bounce animations slow down page loading speed significantly.

C Bounce animations prevent screen readers from reading the content.

D Too much bouncing can distract or cause discomfort for users with motion sensitivity.

💡 Hint

Think about users who might be sensitive to motion or flashing effects.

Excessive motion animations like bouncing can cause dizziness or distraction for users with vestibular disorders or motion sensitivity. It's best to use such animations sparingly and provide options to disable them.

📝 Syntax

advanced

What error will this Tailwind class combination cause?

Look at this button code:
<button class="animate-bounce duration-xyz">Bounce</button>
What happens when the page loads?

Tailwind

<button class="animate-bounce duration-xyz">Bounce</button>

A The animation runs with default speed; 'duration-xyz' is ignored.

B The browser throws a syntax error and stops rendering the button.

C The animation does not run because 'duration-xyz' is invalid and breaks Tailwind.

D The button bounces but with a very fast speed.

💡 Hint

Invalid Tailwind classes are usually ignored, not breaking the page.

Tailwind ignores unknown classes like duration-xyz. The animation runs with the default duration.

❓ layout

expert

How to center a bouncing button horizontally and vertically using Tailwind CSS?

You want a button with bounce animation to appear exactly in the center of the viewport. Which Tailwind class set achieves this best?

Tailwind

<button class="bg-red-500 text-white font-bold py-2 px-4 rounded animate-bounce">Bounce</button>

A Use 'absolute top-1/2 left-1/2' on the button without transform

B Add classes 'mx-auto my-auto' directly to the button

C Wrap the button in a div with classes: 'flex items-center justify-center h-screen w-screen'

D Wrap the button in a div with 'grid place-items-start h-full w-full'

💡 Hint

Flexbox with center alignment is a common way to center content both ways.

Using a parent div with flex, items-center, and justify-center centers the button horizontally and vertically. The h-screen and w-screen make the div fill the viewport.