Tailwind CSS Academy · Lesson

Built-In Keyframe Animations

Apply Tailwind's built-in animate-spin, animate-ping, animate-pulse, and animate-bounce for common loading and attention-grabbing patterns.

CSS Keyframe Animations vs Transitions

CSS transitions animate between two states defined by a start and end value. CSS keyframe animations define a sequence of multiple states and can loop indefinitely. Tailwind includes four built-in keyframe animations via the animate-* utilities. These cover the most common UI animation patterns: loading spinners, pulsing skeletons, attention-grabbing pings, and bouncing indicators — all without any custom CSS.

animate-spin

animate-spin rotates an element continuously at a constant speed — one full 360-degree rotation per second. It is the standard utility for loading spinners. Apply it to a circular element or SVG icon to indicate an in-progress operation. The animation loops indefinitely until the class is removed. Most commonly paired with an SVG ring icon that has a gap to create the familiar spinner appearance.

<!-- Loading spinner using animate-spin -->
<svg class="animate-spin h-5 w-5 text-blue-600"
     xmlns="http://www.w3.org/2000/svg"
     fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
  </path>
</svg>

<!-- Button with spinner -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg" disabled>
  <svg class="animate-spin h-4 w-4" ...></svg>
  Loading...
</button>

All lessons in this course

← Back to Tailwind CSS Academy