Animations, Transitions, and Advanced PatternsLesson 6.2

Tailwind CSS animations: animate-spin, pulse, bounce, and custom keyframes

animate-spin, animate-pulse, animate-bounce, animate-ping, animate-none, custom keyframes in config, animation delay, loading states, skeleton screens

CSS Animations in Tailwind

Tailwind ships four ready-to-use animations covering the most common loading and feedback patterns. For custom animations, extend the config with keyframes.

Built-in animations

<!-- Loading spinner -->
<svg class="animate-spin h-5 w-5 text-blue-600" viewBox="0 0 24 24">...</svg>

<!-- Skeleton loader -->
<div class="animate-pulse">
  <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
  <div class="h-4 bg-gray-200 rounded w-1/2"></div>
</div>

<!-- Notification ping -->
<span class="relative flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
  <span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
</span>

Custom keyframe animation

// tailwind.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        fadeIn: {
          "0%":   { opacity: "0", transform: "translateY(8px)" },
          "100%": { opacity: "1", transform: "translateY(0)" }
        }
      },
      animation: {
        "fade-in": "fadeIn 0.3s ease-out"
      }
    }
  }
}

<div class="animate-fade-in">Fades in on mount</div>

Skeleton screens use animate-pulse on gray placeholder shapes. Replace each loaded element with the skeleton during loading state and swap it out on data arrival.