Animation

v1.6.0+

Utilities for animating elements with CSS animations.

Spin

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

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>

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:

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
  // ...
  variants: {
    animation: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

Learn more in the .

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

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:

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

    theme: {
      extend: {
        animation: {
+         wiggle: 'wiggle 1s ease-in-out infinite',
        }
      }
    }
  }

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

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

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

← Transition Delay