animation

Utilities for animating elements with CSS animations.

Examples

Adding a spin animation

Use the animate-spin utility to add a linear spin animation to elements like loading indicators:

Adding a ping animation

Use 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:

Adding a pulse animation

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

Adding a bounce animation

Use the animate-bounce utility to make an element bounce up and down—useful for things like "scroll down" indicators:

Supporting 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:

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

Using a custom value

Responsive design

Customizing your theme