Tailwind CSS Animations
Tailwind CSS provides utilities for both smooth properties transitions and built-in keyframe animations.
Transitions
Transitions are triggered when an element's state changes. They require three components to work together: a property to watch, a duration, and an easing function.
| Utility Group | Options / Range | Common Usage Example |
|---|---|---|
transition-{prop}
|
colors, opacity, transform, all
|
transition-colors for smooth button hovers.
|
duration-{n}
|
0 to 1000 (ms)
|
duration-300 for a natural-feeling speed.
|
ease-{type}
|
linear, in, out, in-out
|
ease-in-out for balanced start/end speed.
|
delay-{n}
|
0 to 1000 (ms)
|
delay-150 to stagger multiple animations.
|
transition-discrete
|
v4 New Feature | Used to animate display: none to block. |
You can use transition-[ or transition-(--var) for properties not included in the standard set, such as transition-[grid-template-columns].
Animations
Animations run automatically without needing a state change. Tailwind includes several high-performance presets for common UI patterns like loading states and notifications.
| Utility | Visual Behavior | Best Use Case |
|---|---|---|
animate-spin
|
Continuous 360° rotation. | Loading icons and progress spinners. |
animate-ping
|
Scales and fades like a radar ripple. | Notification badges or "live" indicators. |
animate-pulse
|
Gently fades in and out. | Skeleton loaders for content placeholders. |
animate-bounce
|
Bounces up and down. | "Scroll down" arrows or call-to-action icons. |
animate-none
|
Stops all animation. | Resetting motion for accessibility or state logic. |
Similar to transitions (and many other utilities), you can use animation-[ <value>] or animation-(--var) for custom animations, such as animate-(--my-animation).
Combined Implementation Tip
For the best user experience, combine transitions with subtle transform changes:
Examples
Here are some simple examples to demonstrate:
In the next page, we'll see how to manipulate elements in space using transforms.