Transitions

Smooth property changes with transition utilities

Transition utilities control how properties animate between states. Set property, duration, and easing.

Property

Duration

Easing

Click me

Tailwind CSS

<div class="transition-all duration-300 ease-in-out
  hover:scale-130 hover:rotate-12 hover:bg-red-500 hover:opacity-70 hover:shadow-xl hover:rounded-full">
  Click me
</div>

18 / 23