Transitions & Animation

Animation

Utilities for animating elements with CSS animations.

Quick reference

Basic usage

Spin

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

<button type="button" class="bg-indigo-500 ..." 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="relative flex h-3 w-3">
  <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-3 w-3 bg-sky-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-blue-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-slate-200 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-200 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-200 rounded col-span-2"></div>
          <div class="h-2 bg-slate-200 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-200 rounded"></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 ...">
  <!-- ... -->
</svg>

Prefers-reduced-motion

For situations where the user has specified that they prefer 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>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:animate-spin to only apply the animate-spin utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:animate-spin to apply the animate-spin utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

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 can customize these values by editing theme.animation or theme.extend.animation in your tailwind.config.js file.

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.

Arbitrary values

If you need to use a one-off animation value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="animate-[wiggle_1s_ease-in-out_infinite]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.