0
0
Tailwindmarkup~5 mins

Bounce animation (attention) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Bounce animation helps grab attention by making elements move up and down smoothly.

To highlight a button that needs to be clicked.
To draw attention to a new notification or message.
To make an icon or image more lively on a page.
To indicate an interactive element like a link or card.
To add fun and motion to a simple design.
Syntax
Tailwind
<element class="animate-bounce">Content</element>

The animate-bounce class applies a smooth up-and-down movement.

You can add this class to any HTML element like buttons, images, or text.

Examples
A blue button that bounces to catch attention.
Tailwind
<button class="animate-bounce bg-blue-500 text-white px-4 py-2 rounded">Click me</button>
A red text label that bounces to highlight new content.
Tailwind
<div class="animate-bounce text-red-600 font-bold">New!</div>
An icon image that bounces to make it lively.
Tailwind
<img src="icon.png" alt="Icon" class="animate-bounce w-12 h-12" />
Sample Program

This page shows a green button, a purple text, and a star icon all bouncing to attract attention. The button has keyboard focus styles for accessibility. The text uses role="alert" to indicate importance.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bounce Animation Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col items-center justify-center min-h-screen bg-gray-100 gap-6">
  <button class="animate-bounce bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300" aria-label="Bounce attention button">Bounce Button</button>
  <p class="animate-bounce text-xl font-semibold text-purple-700" role="alert">Attention! This text bounces.</p>
  <img src="https://cdn-icons-png.flaticon.com/512/1828/1828817.png" alt="Bouncing star icon" class="animate-bounce w-16 h-16" />
</body>
</html>
OutputSuccess
Important Notes

The bounce animation repeats infinitely by default.

Use aria-label and role attributes to keep animations accessible.

Too much bouncing can be distracting; use it sparingly for best effect.

Summary

Bounce animation makes elements move up and down smoothly to catch attention.

Use the animate-bounce class on buttons, text, or images.

Keep animations accessible and use them thoughtfully.