Animations, Transitions, and Advanced PatternsLesson 6.1

Tailwind transitions and how to animate UI state changes

transition class, transition-all, transition duration, transition timing, ease-in ease-out, delay, transform utilities, hover transitions

Transitions in Tailwind

Apply transition once on an element and it will animate any property that changes on hover, focus, or state change.

Basic transitions

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

<!-- Shadow transition on hover -->
<div class="shadow-sm hover:shadow-lg transition-shadow duration-300 rounded-xl p-6">
  Card
</div>

<!-- Scale on hover -->
<img src="..." class="hover:scale-105 transition-transform duration-200 rounded" />

Transform utilities

<button class="hover:-translate-y-0.5 hover:shadow-md transition-all duration-200">
  Lift effect
</button>

<div class="hover:rotate-3 transition-transform duration-300">
  Tilts on hover
</div>

Duration and easing

<div class="transition-all duration-500 ease-in-out">Slow smooth</div>
<div class="transition-colors duration-75">Snappy</div>

Use transition-colors for color/background/border changes, transition-transform for scale/translate/rotate, and transition-all when multiple properties change. Avoid transition-all on elements with layout properties — it can accidentally animate width or height.