Transitions
Animate property changes smoothly with transition and duration.
Syntax
class="transition duration-300 ease-in-out"Add transition so state changes ease instead of snapping. Tune it with duration-*, ease-*, and delay-*.
transition— animate common properties.duration-300— 300ms.ease-in-out— easing curve.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer smooths a button's background color change on hover by adding transition and duration-200 alongside the hover: variant.
- A dropdown panel animates open by transitioning from opacity-0 to opacity-100 with a short duration-150 ease-out.
- A sidebar slides in smoothly when toggled by combining transition-transform and translate-x utilities with a JavaScript class toggle.
More examples
Smooth color transition
transition-colors limits the transition to color properties; duration-200 makes it run over 200ms, creating a snappy but visible change.
<button
class="bg-indigo-600 text-white px-5 py-2 rounded
hover:bg-indigo-700
transition-colors duration-200"
>
Hover me
</button>Multiple properties transition
transition (without a suffix) transitions all animatable properties; the card smoothly gains a shadow and scales up on hover.
<div
class="bg-white border rounded p-4
hover:shadow-lg hover:scale-105
transition duration-300 ease-in-out"
>
<p class="font-medium">Hover to lift and scale</p>
</div>Easing control
ease-out starts the animation fast and decelerates, giving the lift effect a natural feel; ease-in would feel sluggish to start.
<button
class="bg-emerald-500 text-white px-4 py-2 rounded
hover:translate-y-[-2px]
transition-transform duration-150 ease-out"
>
Lift on hover
</button>
Discussion