Animations & Effects

Built-in Animations

Tailwind includes animate-spin, animate-ping, animate-pulse, and animate-bounce out of the box. Apply them directly as utility classes for loading indicators, notifications, and attention effects.

Animate-spin is the standard loading spinner. Animate-pulse creates skeleton loading placeholders. Animate-ping draws attention to notification badges.

• Combine animate-spin with border utilities for CSS-only spinners
• animate-pulse is ideal for skeleton loading screens
• Use animate-ping sparingly — it draws significant attention

<div class="animate-spin h-5 w-5 border-2 border-blue-600
  border-t-transparent rounded-full" />

<div class="animate-pulse bg-gray-200 h-4 rounded w-3/4" />

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

Transitions

Transition utilities control property animation: transition-colors, transition-opacity, transition-transform, and transition-all. Pair with duration-* (150, 200, 300, 500, 700, 1000ms) and ease-* (linear, in, out, in-out).

Be specific about which properties transition. transition-all animates every property change, which can cause performance issues and unexpected animations.

<button class="bg-blue-600 hover:bg-blue-700
  transition-colors duration-200 ease-in-out">
  Hover me
</button>

<div class="transform hover:scale-105 transition-transform duration-300">
  Scales on hover
</div>

Hover, Focus, and Group Effects

State variants enable interaction feedback. hover:scale-105, focus:ring-2, active:scale-95 create tactile UI responses. Group-hover affects children when the parent is hovered.

Combine transitions with state variants for smooth interactions. Always include focus-visible: variants alongside hover: for keyboard accessibility.

<div class="group cursor-pointer">
  <img class="group-hover:opacity-80 transition-opacity duration-300" />
  <h3 class="group-hover:text-blue-600 transition-colors">
    Title appears interactive
  </h3>
</div>

Custom Animations

Define custom keyframes in tailwind.config.js theme.extend and reference them with animate-* utilities. Custom animations support the full variant system: hover:animate-wiggle, dark:animate-glow.

Keep custom animations subtle and purposeful. UI animations should guide attention, not distract. Respect prefers-reduced-motion by conditionally disabling animations.

// tailwind.config.js
keyframes: {
  slideUp: {
    '0%': { transform: 'translateY(10px)', opacity: '0' },
    '100%': { transform: 'translateY(0)', opacity: '1' },
  },
},
animation: {
  'slide-up': 'slideUp 0.3s ease-out',
}

Motion Accessibility

Users with vestibular disorders may enable reduced motion preferences. Use motion-reduce: variant to disable or simplify animations when prefers-reduced-motion is active.

Replace spatial animations with opacity fades under reduced motion. Never auto-play infinite animations without a pause control.

• motion-reduce:animate-none disables animation entirely
• Test with reduced motion enabled in OS accessibility settings
• Keep animation durations under 300ms for UI feedback

<div class="animate-slide-up motion-reduce:animate-none
  motion-reduce:opacity-100">
  Respects user motion preferences
</div>