Transitions and Animation

transition, duration, animate

transition-colors, transition-transform or transition with duration-200 and ease-out animate changes between states (such as hover:scale-105). Built-in animations include animate-spin (loaders), animate-pulse (skeletons) and animate-ping. Respect users who reduce motion with motion-reduce:transition-none and motion-safe: variants. Define custom keyframes as --animate-* theme variables with @keyframes inside @theme.

Hover motion and a loading skeleton

With reduced-motion support.

<a href="#" class="block rounded-xl border p-4 transition-transform duration-200 ease-out
                   hover:-translate-y-1 hover:shadow-lg motion-reduce:transition-none motion-reduce:hover:translate-y-0">
  Hover me
</a>

<div class="space-y-2 animate-pulse" aria-hidden="true">
  <div class="h-4 w-3/4 rounded bg-gray-200"></div>
  <div class="h-4 w-1/2 rounded bg-gray-200"></div>
</div>

Keep UI transitions short

Around 150 to 300 ms feels responsive; longer animations slow users down.

Quick check: Which variant disables motion for users who prefer reduced motion?

• hover:
• motion-reduce:
• print:
• dark: