Transitions

Add CSS transitions with property, duration, timing, and delay utilities so state changes animate smoothly.

4 min read Level 2/5 #tailwind#transitions#motion

What you'll learn

Use transition and property-scoped transition utilities
Set duration, easing, and delay
Respect reduced motion with motion-safe and motion-reduce

A state change from hover: or data-[state=open]: snaps instantly by default. Transition utilities tell the browser to interpolate between the two states over time.

Enabling Transitions

transition animates the common animatable properties. Scoped variants like transition-colors and transition-transform are usually what you want:

<button class="bg-blue-600 text-white px-4 py-2 rounded
               transition-colors duration-200 ease-out
               hover:bg-blue-700">
  Hover me
</button>

duration-200 sets 200ms, ease-out picks the timing curve, and only the color animates because we used transition-colors.

Duration, Easing, and Delay

These three utilities shape the feel of the motion:

<div class="transition-transform duration-300 ease-in-out delay-100
            hover:-translate-y-1">
  Lifts on hover, after a short delay
</div>

delay-100 waits 100ms before starting — handy for staggering. Arbitrary values like duration-[450ms] and ease-[cubic-bezier(0.4,0,0.2,1)] work when the scale is not enough.

Performance and Reduced Motion

Prefer scoped transitions over transition-all. Animating all forces the browser to watch every property, and animating layout properties like width or top triggers expensive reflows — animate transform and opacity instead.

Always honour users who request reduced motion:

<div class="motion-safe:transition motion-safe:hover:scale-105
            motion-reduce:transition-none">
  Respects prefers-reduced-motion
</div>

motion-safe: only applies the animation when the user has not requested reduced motion, and motion-reduce:transition-none explicitly disables it for those who have.

Animations & Keyframes →