Tailwind CSS - Animation

Tailwind CSS: Animations

Tailwind CSS includes a set of pre-configured animation utilities that make it simple to add common motion effects to your elements, such as spinning loaders, pulsing buttons, and bouncing icons.

Built-in Animation Utilities

Here are the core animation classes provided by Tailwind out-of-the-box.

Class	Description
animate-none	Removes any active CSS animation.
animate-spin	Applies a linear spin animation. Perfect for loading indicators.
animate-ping	Creates a scaling and fading “ping” or “radar” effect. Useful for notifications.
animate-pulse	Applies a gentle fade-in and fade-out effect. Ideal for skeleton loading screens.
animate-bounce	Makes an element move up and down. Great for drawing attention to an element.

Example: Common Animation Use Cases

This example demonstrates each of the built-in animations in a practical context, allowing you to see them in action and compare their effects.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Animation Examples</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 text-slate-800 p-8 font-sans">

  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-center mb-10">Animation Utilities</h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 text-center">

      <!-- Animate Spin -->
      <div>
        <h3 class="font-semibold mb-4">animate-spin</h3>
        <div class="flex justify-center items-center h-24">
          <div class="w-12 h-12 border-4 border-dashed border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        </div>
        <p class="text-sm text-slate-500 mt-2">Loading spinner</p>
      </div>

      <!-- Animate Ping -->
      <div>
        <h3 class="font-semibold mb-4">animate-ping</h3>
        <div class="flex justify-center items-center h-24">
          <span class="relative flex h-6 w-6">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-6 w-6 bg-sky-500"></span>
          </span>
        </div>
        <p class="text-sm text-slate-500 mt-2">Live notification</p>
      </div>

      <!-- Animate Pulse -->
      <div>
        <h3 class="font-semibold mb-4">animate-pulse</h3>
        <div class="flex justify-center items-center h-24">
          <div class="w-full max-w-[150px]">
            <div class="h-4 bg-slate-300 rounded-full w-full animate-pulse"></div>
            <div class="h-4 bg-slate-300 rounded-full w-5/6 mt-2 animate-pulse [animation-delay:0.2s]"></div>
          </div>
        </div>
        <p class="text-sm text-slate-500 mt-2">Skeleton loader</p>
      </div>

      <!-- Animate Bounce -->
      <div>
        <h3 class="font-semibold mb-4">animate-bounce</h3>
        <div class="flex justify-center items-center h-24">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 text-green-500 animate-bounce">
            <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd" />
          </svg>
        </div>
        <p class="text-sm text-slate-500 mt-2">Scroll indicator</p>
      </div>

    </div>
  </div>

</body>
</html>

Advanced: Customizing Animations

For unique animations, you can extend Tailwind’s theme by defining your own keyframes and animation utilities in tailwind.config.js. This is the standard way to add project-specific animations.

Configuration Example

Let’s add a custom “wiggle” animation.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        }
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      }
    },
  },
  plugins: [],
}

Usage in HTML

Once configured, you can use animate-wiggle just like any built-in utility.

<button class="bg-rose-500 text-white p-4 rounded-lg hover:animate-wiggle">
  Wiggle Me!
</button>

Accessibility Best Practice: Respecting User Preferences

Some users prefer to reduce motion due to vestibular disorders. Tailwind CSS provides the motion-reduce variant to disable or replace animations for these users. It’s a best practice to use it.

<!-- The spin animation will be disabled if the user has 'prefers-reduced-motion' enabled -->
<div class="animate-spin motion-reduce:animate-none">...</div>

<!-- You can also offer a more subtle animation as an alternative -->
<button class="animate-bounce motion-reduce:animate-pulse">Click Me</button>