Transition Utilities

Each utility defines a single target state value. Use with Tailwind's transition-* and duration-* properties. Click the buttons below to see effects.

Notes

All utilities only define the target state — pair with transition-[property] and duration-* for animation.
Supported transitions: rotate (cross, expand, collapse, reverse), scale (up, down, in, out), 3D flip (flip-y, flip-x), translate (up, down, start, end), opacity (in, out), blur (in, out), backdrop-blur (in, out), shadow (in, out), drop-shadow (in, out).
Combine multiple properties: transition-[opacity,translate] duration-normal opacity-in translate-up.

Rotate

rotate-cross (+45°)

rotate-expand / rotate-collapse

rotate-reverse (180°)

Scale

3D Flip

flip-y

Flip Y

flip-x

Flip X

Translate

translate-up / translate-down

translate-start / translate-end

R/L

Opacity

Fade

Blur

Backdrop Blur

Shadow

drop-shadow

Drop

Combinations

opacity-in + translate-up

Combo

scale-up + rotate-cross

Combo