Tailwind CSS Transform & Transition | Interactive Documentation

Transition Property

Control which properties transition when they change. Different transition properties apply to different CSS properties.

transition-colors

transition-colors

transition-opacity

transition-opacity

transition-shadow

transition-shadow

transition-transform

transition-transform

transition-all

transition-all

transition-none

transition-none

Timing Function

Control the speed curve of the transition with different timing functions. Each creates a different feel of movement.

ease-linear

transition-transform ease-linear

ease-in

transition-transform ease-in

ease-out

transition-transform ease-out

ease-in-out

transition-transform ease-in-out

Timing Function Combinations

Combine timing functions with different properties for more nuanced animations:

ease-in + duration-700 ease-out + delay-150 ease-in-out + duration-1000 ease-linear + duration-500

Delay

Add a delay before the transition starts. This is useful for creating staggered animations or waiting for other actions to complete.

Delay Comparison

Staggered Animation Example

Hover over each circle to see the staggered effect

Available Delay Values

delay-75 delay-100 delay-150 delay-200 delay-300 delay-500 delay-700 delay-1000

Duration

Set how long the transition takes. Shorter durations are good for subtle effects, while longer durations work well for more dramatic transformations.

Duration Comparison

Quick Transitions

duration-75

75ms

duration-100

100ms

duration-150

150ms

duration-200

200ms

Slower Transitions

duration-300

300ms

duration-500

500ms

duration-700

700ms

duration-1000

1000ms

Duration with Transforms

Rotate

duration-300

Scale

duration-500

Translate

duration-700

Skew

duration-1000

Transforms

Scale

Use scale utilities to resize elements. Scale values range from 0 (completely collapsed) to 150 (50% larger).

scale-50

50%

scale-75

75%

scale-100

100%

scale-125

125%

Scaling in One Direction

scale-x-50

X-axis only

scale-y-50

Y-axis only

scale-x-150 scale-y-50

Different axes

Common Scale Classes

scale-0 scale-50 scale-75 scale-90 scale-95 scale-100 scale-105 scale-110 scale-125 scale-150

Rotate

Use rotate utilities to rotate elements by specific degree increments.

rotate-0

0°

rotate-45

45°

rotate-90

90°

rotate-180

180°

Subtle Rotations

rotate-1

1°

rotate-2

2°

rotate-6

6°

rotate-12

12°

Available Rotate Classes

rotate-0 rotate-1 rotate-2 rotate-3 rotate-6 rotate-12 rotate-45 rotate-90 rotate-180

Translate

Use translate utilities to move elements along X and Y axes. Values can be pixels, rems, or percentages.

Center (Origin)

translate-x-16

translate-y-16

-translate-x-16

-translate-y-16

Percentage-based Translation

translate-x-1/4

translate-y-1/4

translate-x-1/2 translate-y-1/4

Skew

Use skew utilities to distort elements along X and Y axes by specific degree increments.

skew-x-6

X: 6 degrees

skew-y-6

Y: 6 degrees

skew-x-6 skew-y-3

X: 6°, Y: 3°

More Extreme Skewing

skew-x-12

X: 12 degrees

skew-y-12

Y: 12 degrees

-skew-x-12

X: -12 degrees

Available Skew Classes

skew-x-0 skew-y-0 skew-x-1 skew-y-1 skew-x-2 skew-y-2 skew-x-3 skew-y-3 skew-x-6 skew-y-6 skew-x-12 skew-y-12

Transform Origin

Use origin utilities to change the position that transforms are applied from. This dramatically changes how rotations, scales, and skews behave.

origin-center

Default

origin-top-left

Top Left

origin-bottom-right

Bottom Right

Origin with Scale

origin-center

With scale-75

origin-top

With scale-75

origin-bottom-left

With scale-75

All Transform Origin Options

origin-center origin-top origin-top-right origin-right origin-bottom-right origin-bottom origin-bottom-left origin-left origin-top-left

Interactive Transform Playground

Create Your Own Transforms

Adjust Transform Values

Scale X

0 1 2

Scale Y

0 1 2

Rotate (degrees)

0° 180° 360°

Translate X (px)

-50px 0px 50px

Translate Y (px)

-50px 0px 50px

Skew X (degrees)

-45° 0° 45°

Skew Y (degrees)

-45° 0° 45°

Duration (ms)

0ms 1000ms 2000ms

Timing Function

Preview

Tailwind CSS

Tailwind CSS Classes:

scale-[1] rotate-[0deg] translate-x-[0px] translate-y-[0px] skew-x-[0deg] skew-y-[0deg] duration-[300] ease-linear

Powerful Combinations

Multiple Transforms

Combine multiple transform utilities for complex effects. The order doesn't matter as Tailwind combines them into a single transform.

scale-110 rotate-12

Scale + Rotate

translate-x-4 skew-x-12

Translate + Skew

rotate-45 scale-75 -translate-y-2

Rotate + Scale + Translate

Hover Combinations

Combine transition properties with hover effects for interactive elements.

Card Hover Effect

Card Title

Hover over this card to see the effect

Card Title

Hover over this card to see the effect

Card Title

Hover over this card to see the effect

Animation Examples

These examples use CSS animations in combination with Tailwind's transform utilities.

Pulse

Scale Animation

Rotate

Rotation Animation

Translate

Movement Animation

Skew

Skew Animation

Summary & Key Takeaways

What We've Learned

Transforms and transitions are powerful tools for creating interactive, engaging user interfaces
Tailwind provides comprehensive utilities for controlling animations, including property, timing, duration, and delay
Transform utilities let you manipulate elements through scale, rotate, translate, and skew operations
Combining multiple transforms and transitions creates sophisticated effects without custom CSS

Next Steps

Experiment with combining transform utilities to create unique visual effects
Build interactive components using transitions for smoother user experiences
Explore custom transform configurations in your Tailwind config file
Check out the official Tailwind CSS documentation for more details

Back to Main Documentation