Animation

Basic usage

Spin

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

<button type="button" className="bg-indigo-500 ..." disabled>
  <svg className="**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 className="flex h-3 w-3">
  <span className="**animate-ping** absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span className="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 className="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div className="**animate-pulse** flex space-x-4">
    <div className="rounded-full bg-slate-200 h-10 w-10" dark-className="rounded-full bg-slate-700 h-10 w-10"></div>
    <div className="flex-1 space-y-6 py-1">
      <div className="h-2 bg-slate-200 rounded" dark-className="h-2 bg-slate-700 rounded"></div>
      <div className="space-y-3">
        <div className="grid grid-cols-3 gap-4">
          <div className="h-2 bg-slate-200 rounded col-span-2" dark-className="h-2 bg-slate-700 rounded col-span-2"></div>
          <div className="h-2 bg-slate-200 rounded col-span-1" dark-className="h-2 bg-slate-700 rounded col-span-1"></div>
        </div>
        <div className="h-2 bg-slate-200 rounded" dark-className="h-2 bg-slate-700 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 className="**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" className="bg-indigo-600 ..." disabled>
  <svg className="**motion-safe:animate-spin** h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>