Tailwind CSS Transition

Transitions make UI interactions feel polished. Instead of instant changes, elements smoothly animate between states — a button darkens on hover, a card lifts on focus, a sidebar slides in. Tailwind's transition utilities let you add these effects with just a class name.

How to Add Tailwind Transitions

Tailwind provides transition-{property} classes that specify which CSS properties should animate:

• transition-none – No transitions.
• transition-all – Transitions all changeable properties.
• transition-colors – Transitions color-related properties (background, border, text color).
• transition – Transitions color, background, border, text-decoration, fill, stroke, opacity, box-shadow, transform, filter, and backdrop-filter.
• transition-opacity – Transitions only opacity.
• transition-shadow – Transitions box-shadow.
• transition-transform – Transitions transform properties (scale, rotate, translate).

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

Preview

Transition Duration

Control how long a transition takes with duration-{ms}:

| Class | Duration | |-------|----------| | duration-0 | 0ms | | duration-75 | 75ms | | duration-100 | 100ms | | duration-150 | 150ms (default) | | duration-200 | 200ms | | duration-300 | 300ms | | duration-500 | 500ms | | duration-700 | 700ms | | duration-1000 | 1000ms |

<div class="transition-all duration-300 hover:bg-blue-500 hover:text-white p-4 rounded">
  300ms transition
</div>

Preview

Transition Timing Function (Easing)

Control the acceleration curve with ease-{type}:

| Class | CSS Value | Effect | |-------|-----------|--------| | ease-linear | linear | Constant speed | | ease-in | cubic-bezier(0.4, 0, 1, 1) | Starts slow, ends fast | | ease-out | cubic-bezier(0, 0, 0.2, 1) | Starts fast, ends slow | | ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Slow start and end |

<div class="transition-transform duration-500 ease-in-out hover:translate-x-4">
  Smooth ease in and out
</div>

Preview

Transition Delay

Add a delay before the transition starts with delay-{ms}:

| Class | Delay | |-------|-------| | delay-0 | 0ms | | delay-75 | 75ms | | delay-100 | 100ms | | delay-150 | 150ms | | delay-200 | 200ms | | delay-300 | 300ms | | delay-500 | 500ms | | delay-700 | 700ms | | delay-1000 | 1000ms |

<button class="transition-colors duration-300 delay-150 bg-blue-500 hover:bg-red-500 text-white px-4 py-2 rounded">
  Delayed color change
</button>

Common Transition Patterns

Button Hover Effect

<button class="transition-all duration-200 ease-in-out bg-indigo-600 hover:bg-indigo-700 hover:shadow-lg hover:-translate-y-0.5 text-white px-6 py-3 rounded-lg font-medium">
  Hover Effect
</button>

Preview

Card Lift on Hover

<div class="transition-all duration-300 hover:shadow-xl hover:-translate-y-1 bg-white rounded-xl p-6 shadow-md">
  <h3 class="font-bold text-lg">Card Title</h3>
  <p class="text-gray-600 mt-2">Card content goes here.</p>
</div>

Responsive Transitions

Apply transitions only at specific breakpoints:

<div class="md:transition-all md:duration-300 md:hover:scale-105">
  Transitions only on medium screens and above
</div>

✏️ Arbitrary Value Usage

Use custom durations, delays, or easing curves with arbitrary values:

<div class="transition-all duration-[400ms] ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]">
  Custom bounce easing
</div>