Tailwind CSS Transition Cheatsheet

Complete Tailwind v4 transition reference with interactive examples.
Click any class to copy to clipboard.

Quick Navigation

Transition Property Duration Timing Function Delay Common Patterns FAQ

Transition Property

Class	CSS	Description
`transition-none`	`transition-property: none;`	No transition
`transition-all`	`transition-property: all;`	Transitions all properties
`transition`	`transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;`	Common properties (default)
`transition-colors`	`transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;`	Color properties only
`transition-opacity`	`transition-property: opacity;`	Opacity only
`transition-shadow`	`transition-property: box-shadow;`	Box shadow only
`transition-transform`	`transition-property: transform;`	Transform only

Transition Property - Interactive Demo

Hover over each box to see the transition in action. Each uses duration-300 ease-in-out.

transition-all

transition-colors(scale instant)

transition-transform(color instant)

transition-shadow

Duration

Class	CSS
`duration-0`	`transition-duration: 0s;`
`duration-75`	`transition-duration: 75ms;`
`duration-100`	`transition-duration: 100ms;`
`duration-150`	`transition-duration: 150ms;`
`duration-200`	`transition-duration: 200ms;`
`duration-300`	`transition-duration: 300ms;`
`duration-500`	`transition-duration: 500ms;`
`duration-700`	`transition-duration: 700ms;`
`duration-1000`	`transition-duration: 1000ms;`

Duration - Visual Comparison

Hover to see how different durations affect animation speed.

duration-0

duration-75

75ms

duration-100

100ms

duration-150

150ms

duration-200

200ms

duration-300

300ms

duration-500

500ms

duration-700

700ms

duration-1000

1000ms

Timing Function (Ease)

Class	CSS	Description
`ease-linear`	`transition-timing-function: linear;`	Constant speed
`ease-in`	`transition-timing-function: cubic-bezier(0.4, 0, 1, 1);`	Slow start
`ease-out`	`transition-timing-function: cubic-bezier(0, 0, 0.2, 1);`	Slow end
`ease-in-out`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`	Slow start and end

Timing Functions - Visual Comparison

Click the "Play" button to see all timing functions animate simultaneously.

ease-linearConstant speed

ease-inSlow start

ease-outSlow end

ease-in-outSlow start and end

Delay

Class	CSS
`delay-0`	`transition-delay: 0s;`
`delay-75`	`transition-delay: 75ms;`
`delay-100`	`transition-delay: 100ms;`
`delay-150`	`transition-delay: 150ms;`
`delay-200`	`transition-delay: 200ms;`
`delay-300`	`transition-delay: 300ms;`
`delay-500`	`transition-delay: 500ms;`
`delay-700`	`transition-delay: 700ms;`
`delay-1000`	`transition-delay: 1000ms;`

Delay - Staggered Animation Demo

Hover over the container to see staggered animations using delays.

150

200

300

500

Each box shows its delay value in ms

Common Transition Patterns

Button Hover

Smooth color and scale transition

transition-all duration-200 ease-in-out hover:bg-primary hover:scale-105

Card Lift

Subtle lift with shadow

Card Content

transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-lg

Fade In

Opacity transition for reveals

transition-opacity duration-300 ease-in-out opacity-50 hover:opacity-100

Color Swap

Fast color transition

Swap Colors

transition-colors duration-150 hover:bg-secondary hover:text-secondary-content

Smooth Scale

Transform-only transition

transition-transform duration-200 ease-out hover:scale-110

Glow Effect

Shadow color transition

transition-shadow duration-300 hover:shadow-xl hover:shadow-primary/30

Code Examples

Basic Button Transition

<button class="transition duration-300
         hover:bg-blue-600">
  Click me
</button>

Transform with Delay

<div class="transition-transform
     duration-500 delay-100 ease-out
     hover:scale-105">
  Card content
</div>

Color-Only Transition

<a class="transition-colors
   duration-150 ease-in-out
   hover:text-blue-500">
  Link text
</a>

Smooth Shadow

<div class="transition-shadow
     duration-300 ease-out
     hover:shadow-xl">
  Elevated card
</div>

About Tailwind Transitions

Tailwind's transition utilities provide a simple way to add smooth animations to state changes. The default transition includes common properties like colors, opacity, shadows, and transforms.

Combine transition with duration and timing utilities for full control: transition duration-300 ease-in-out

For responsive transitions, prefix any class with a breakpoint: md:duration-500, lg:ease-out

For arbitrary values, use bracket notation: duration-[400ms], delay-[250ms]

Frequently Asked Questions

What's the difference between transition and transition-all?

The 'transition' class transitions a curated list of common properties (colors, opacity, shadows, transforms, filters), while 'transition-all' transitions ALL properties that change. Use 'transition' for better performance since 'transition-all' can cause unexpected transitions on properties you didn't intend to animate.

What's the best duration for smooth animations?

For most UI interactions, duration-150 to duration-300 (150-300ms) feels snappy and responsive. Shorter durations (75-100ms) work well for small elements like icons or hover states. Longer durations (500ms+) are better for larger, more dramatic transitions like page elements or modals.

When should I use ease-in vs ease-out vs ease-in-out?

Use ease-out (slow end) for elements entering the screen - it feels more natural. Use ease-in (slow start) for elements leaving the screen. Use ease-in-out for state changes where the element stays visible, like expanding/collapsing. Linear is best for continuous animations like progress bars.

How do I combine transition utilities in Tailwind?

Stack the classes together: 'transition-colors duration-300 ease-in-out delay-100'. You need at least a transition-* class to define what transitions, then optionally add duration, timing, and delay. The default duration is 150ms if not specified.

Can I use different durations for different properties?

Tailwind's utility classes apply the same duration to all transitioning properties. For fine-grained control with different durations per property, use arbitrary values like 'transition-[color_200ms,transform_500ms]' or define custom CSS.

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect transitions, animations, and timing with ease.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →