Tailwind CSS Transitions & Effects

Transitions

transition-all

All Properties

transition-colors

Colors

transition-opacity

Opacity

transition-shadow

Shadow

transition-transform

Transform

Transition Duration

duration-75

duration-300

duration-700

duration-1000

Transition Timing Function

ease-linear

ease-in

ease-out

ease-in-out

Transition Delay

delay-150

delay-300

delay-500

delay-1000

Transforms

scale-125

scale-x-150

scale-y-150

rotate-45

rotate-90

rotate-180

translate-x-10

translate-y-10

skew-x-12

skew-y-12

origin-top-left

origin-bottom-right

Animations

animate-spin

animate-ping

animate-pulse

animate-bounce