Animation

Tailwind CSS version

v1.6.0+

Utilities for animating elements with CSS animations.

Class reference

Spin

Add the animate-spin utility to add a linear spin animation to elements like loading indicators.

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

Ping

Add the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

<span class="flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-pink-500"></span>
</span>

Pulse

Add the animate-pulse utility to make an element gently fade in and out — useful for things like skeleton loaders.

<div class="border border-gray-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-gray-400 h-12 w-12"></div>
    <div class="flex-1 space-y-4 py-1">
      <div class="h-4 bg-gray-400 rounded w-3/4"></div>
      <div class="space-y-2">
        <div class="h-4 bg-gray-400 rounded"></div>
        <div class="h-4 bg-gray-400 rounded w-5/6"></div>
      </div>
    </div>
  </div>
</div>

Bounce

Add the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

<svg class="animate-bounce w-6 h-6 text-gray-900" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>

Prefers-reduced-motion

You can conditionally apply animations and transitions using the motion-safe and motion-reduce variants:

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

These variants are not enabled by default, but you can enable them in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    animation: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

Learn more in the variants documentation.

Responsive

To change or disable an animation at a specific breakpoint, add a {screen}: prefix to any existing animation utility. For example, use md:animate-none to apply the animate-none utility at only medium screen sizes and above.

<div class="animate-spin md:animate-none ...">
  <!-- ... -->
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Animations by their very nature tend to be highly project-specific. The animations we include by default are best thought of as helpful examples, and you’re encouraged to customize your animations to better suit your needs.

By default Tailwind provides utilities for four different example animations, as well as the animate-none utility. You change, add, or remove these by customizing the animation section of your theme configuration.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         'spin-slow': 'spin 3s linear infinite',
        }
      }
    }
  }

To add new animation @keyframes, use the keyframes section of your theme configuration:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        keyframes: {
+         wiggle: {
+           '0%, 100%': { transform: 'rotate(-3deg)' },
+           '50%': { transform: 'rotate(3deg)' },
+         }
        }
      }
    }
  }

You can then reference these keyframes by name in the animation section of your theme configuration:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         wiggle: 'wiggle 1s ease-in-out infinite',
        }
      }
    }
  }

Learn more about customizing the default theme in the theme customization documentation.

Responsive and pseudo-class variants

By default, only responsive variants are generated for animation utilities.

You can control which variants are generated for the animation utilities by modifying the animation property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     animation: ['responsive'],
+     animation: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don’t plan to use the animation utilities in your project, you can disable them entirely by setting the animation property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     animation: false,
    }
  }

← Transition Delay   Scale →