Transition, Animation, and Transform Utilities

Tailwind includes utilities for CSS transitions and animations that make interactive UI elements feel polished without writing custom keyframes. The transition utility applies a sensible transition to common properties, while transition-colors, transition-opacity, transition-transform, and transition-shadow target specific property groups. Duration is controlled with duration-75 through duration-1000, and easing with ease-linear, ease-in, ease-out, and ease-in-out. Transform utilities enable scaling, rotation, translation, and skewing directly in HTML. scale-75, scale-100, scale-110, rotate-45, rotate-90, rotate-180, -rotate-6, translate-x-4, -translate-y-2, skew-x-6 are all valid class names. These transforms compose — applying multiple transform utilities on the same element merges them through CSS custom properties rather than overwriting each other. The built-in animation utilities — animate-spin, animate-ping, animate-pulse, animate-bounce — cover the most common micro-interaction patterns. animate-spin is ideal for loading spinners, animate-pulse creates skeleton-screen loading states, animate-bounce draws attention to icons, and animate-ping produces expanding rings for notification badges. Custom animations can be added through the theme.extend.animation and theme.extend.keyframes sections of tailwind.config.js.

Example

<!-- Hover scale + shadow transition on a card -->
<div class="bg-white rounded-xl shadow p-6
            transform transition-all duration-300 ease-out
            hover:scale-105 hover:shadow-xl">
  Hover to elevate me
</div>

<!-- Rotate icon on hover -->
<button class="group flex items-center gap-2">
  <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-180"
       viewBox="0 0 24 24" fill="currentColor">
    <path d="M19 9l-7 7-7-7"/>
  </svg>
  Toggle
</button>

<!-- Translate on hover (button with arrow) -->
<a class="inline-flex items-center gap-1 text-blue-600 hover:gap-3 transition-all">
  Learn more
  <span class="transition-transform group-hover:translate-x-1">→</span>
</a>

<!-- Loading spinner -->
<svg class="animate-spin h-8 w-8 text-blue-500" viewBox="0 0 24 24" fill="none">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
</svg>

<!-- Skeleton loading pulse -->
<div class="space-y-3 p-4">
  <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
  <div class="h-4 bg-gray-200 rounded animate-pulse w-1/2"></div>
  <div class="h-4 bg-gray-200 rounded animate-pulse w-5/6"></div>
</div>

<!-- Notification ping badge -->
<div class="relative inline-flex">
  <button class="bg-gray-800 text-white p-2 rounded-full">🔔</button>
  <span class="absolute top-0 right-0 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 rounded-full h-3 w-3 bg-red-500"></span>
  </span>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned