Transitions and Animation Utilities

Motion with Tailwind

Tailwind provides utilities to add CSS transitions and keyframe animations without writing custom CSS.

Transition Utilities

• transition — transition commonly animated properties (color, background, border, shadow, opacity, transform).
• transition-colors, transition-opacity, transition-transform, transition-shadow — target specific properties.
• duration-150, duration-300, duration-500, duration-700 — transition duration.
• ease-in, ease-out, ease-in-out, ease-linear — timing function.
• delay-150, delay-300 — transition delay.

Transform Utilities

• scale-95, scale-105, scale-110 — scale transform.
• rotate-45, -rotate-6 — rotation.
• translate-x-4, -translate-y-2 — translation.
• skew-x-3 — skew.

Keyframe Animations

• animate-spin — continuous 360deg rotation (loading spinners).
• animate-ping — scale + fade pulse (notification badges).
• animate-pulse — opacity pulse (skeleton loaders).
• animate-bounce — vertical bounce.

<button class="rounded-lg bg-sky-600 px-5 py-2 text-white
               hover:scale-105 active:scale-95
               transition-transform duration-150 ease-out">
  Animated Button
</button>

<div class="size-4 rounded-full bg-sky-500 animate-ping"></div>