Tailwind CSS 27 🎨 Transitions, Durations, Easing Curves, and Delay Control
A transition is the difference between a state change and an animation. Without one, a hover effect snaps into place. With one, it moves. The transition properties control what changes, how long it takes, how it accelerates, and whether it starts immediately. Tailwind exposes each of these as separate utilities, and they compose the same way the transform and shadow utilities do. This chapter covers the full transition system: the transition-* property selectors, the duration-* timing controls, the ease-* curves, and the delay-* utilities that postpone the start.
Key point: A transition does nothing without a property change. The transition-* utility declares which properties will animate. The duration-* utility sets how long the animation takes. The ease-* utility sets the acceleration curve. The delay-* utility sets how long to wait before starting. All four are needed for a transition to work as expected, and all four are separate utilities.
Why transition utilities exist
The snap problem. A button that changes background color on hover looks abrupt without a transition. The state change is correct, but the visual jump is jarring. A transition smooths the change over a short period, making the interface feel responsive rather than reactive. The transition-* utilities enable this smoothing for specific properties.
The property problem. Not every property should animate. Animating width or height triggers layout, which is expensive. Animating background-color is cheap, but animating all animates everything, including properties that should not move. Tailwind provides granular control: transition-colors for color changes, transition-transform for transforms, transition-opacity for fade effects, and transition-all when nothing more specific fits.
The timing problem. A transition that is too fast feels like a snap. One that is too slow feels sluggish. The duration-* utilities provide a scale from 75ms to 1000ms, covering the range from instant feedback to deliberate motion. The right duration depends on the size of the change and the context of the interaction.
The easing problem. Linear motion looks mechanical. Real motion accelerates and decelerates. The ease-* utilities provide the standard curves: ease-linear, ease-in, ease-out, ease-in-out. The default for Tailwind’s transitions is ease-in-out, which accelerates at the start and decelerates at the end.
The delay problem. Sometimes a transition should wait before starting. A tooltip might appear after a short delay to avoid flickering when the mouse passes over. A staggered list animation might delay each item slightly. The delay-* utilities postpone the start without changing the duration or the curve.
The composition problem. All four properties compose. transition-colors duration-300 ease-in-out delay-150 is a complete transition specification. Each utility sets one property, and the browser combines them. Changing one does not require rewriting the others.
a. Transition properties
The transition-* utilities declare which CSS properties will animate. The browser then interpolates between the old and new values over the specified duration.
| Utility | Properties Animated |
|---|---|
transition-none | Nothing |
transition-all | All animatable properties |
transition | Common properties (color, background, border, opacity, shadow, transform, filter) |
transition-colors | Color, background-color, border-color, text-decoration-color, fill, stroke |
transition-opacity | Opacity |
transition-shadow | Box-shadow |
transition-transform | Transform |
transition-filter | Filter |
transition-[...] | Arbitrary property list |
The bare transition utility is the default and covers the most common properties. It is a good starting point for most interactions.
<button class="transition hover:bg-blue-600">
Hover me
</button>The transition-colors utility is more specific and slightly more efficient. It animates only the color-related properties.
<button class="transition-colors duration-200 hover:bg-blue-600 hover:text-white">
Hover me
</button>The transition-transform utility is used for scale, rotate, and translate effects.
<div class="transition-transform duration-300 hover:scale-105">
Card
</div>The transition-all utility animates everything. It is convenient but should be used with care: animating width, height, margin, or padding triggers layout, which can cause jank on complex pages. When in doubt, use a more specific transition.
The arbitrary value form allows a custom property list:
<div class="transition-[height,opacity] duration-500">
Custom properties
</div>The commas in the arbitrary value are preserved, producing transition-property: height,opacity.
b. Durations and easing curves
The duration-* utilities set the transition duration in milliseconds.
| Utility | Duration |
|---|---|
duration-0 | 0ms |
duration-75 | 75ms |
duration-100 | 100ms |
duration-150 | 150ms |
duration-200 | 200ms |
duration-300 | 300ms |
duration-500 | 500ms |
duration-700 | 700ms |
duration-1000 | 1000ms |
duration-[...] | Arbitrary value |
The default duration when no duration-* utility is present is 150ms, set by the transition utility’s default. Specifying a duration overrides this.
<button class="transition duration-300 hover:bg-blue-600">
Smooth 300ms
</button>The right duration depends on the size of the change. Small changes—a color shift, an opacity fade—feel right at 150–200ms. Larger changes—a panel sliding in, a modal appearing—need 300–500ms. Anything over 700ms feels slow unless it is a deliberate, dramatic motion.
The ease-* utilities set the timing function, which controls the acceleration curve.
| Utility | CSS | Behavior |
|---|---|---|
ease-linear | linear | Constant speed |
ease-in | cubic-bezier(0.4, 0, 1, 1) | Starts slow, ends fast |
ease-out | cubic-bezier(0, 0, 0.2, 1) | Starts fast, ends slow |
ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Starts slow, speeds up, ends slow |
ease-[...] | Arbitrary | Custom cubic-bezier |
The default for Tailwind’s transitions is ease-in-out, which is a good general-purpose curve. ease-out is often preferred for elements that appear (the motion decelerates into place), and ease-in for elements that disappear (the motion accelerates out of view).
<div class="transition-transform duration-300 ease-out hover:scale-105">
Appears smoothly
</div>
<div class="transition-opacity duration-200 ease-in hover:opacity-0">
Fades out
</div>Custom curves use the arbitrary value form with a cubic-bezier or steps function:
<div class="transition ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]">
Bouncy
</div>The steps function produces a discrete, frame-by-frame animation:
<div class="transition ease-[steps(4,end)]">
Stepped
</div>c. Delays and combining utilities
The delay-* utilities postpone the start of the transition. The element stays in its original state for the delay period, then transitions over the duration.
| Utility | Delay |
|---|---|
delay-0 | 0ms |
delay-75 | 75ms |
delay-100 | 100ms |
delay-150 | 150ms |
delay-200 | 200ms |
delay-300 | 300ms |
delay-500 | 500ms |
delay-700 | 700ms |
delay-1000 | 1000ms |
delay-[...] | Arbitrary value |
A tooltip that appears after a short delay avoids flickering when the mouse passes over the trigger:
<div class="group relative">
<button>Hover me</button>
<div class="absolute opacity-0 transition-opacity delay-300 group-hover:opacity-100">
Tooltip
</div>
</div>The tooltip starts invisible and transitions to visible over the default duration. The delay-300 postpones the start by 300ms, so brief hovers do not trigger it.
Delays are also used for staggered animations. Each item in a list gets a slightly longer delay:
<ul>
<li class="transition delay-75">Item 1</li>
<li class="transition delay-150">Item 2</li>
<li class="transition delay-200">Item 3</li>
</ul>The items animate in sequence rather than all at once.
All four utilities combine:
<div class="transition-all duration-300 ease-in-out delay-150 hover:bg-blue-600">
Complete transition specification
</div>The transition watches all properties. The duration is 300ms. The curve is ease-in-out. The delay is 150ms. On hover, the background changes after a 150ms pause, over 300ms, with the ease-in-out curve.
Variants apply to each utility independently. hover:duration-500 changes the duration on hover, focus:ease-out changes the curve on focus, and md:delay-0 removes the delay on medium screens and up. This granularity allows the transition to be adjusted per state.
Complete Example Session
<!-- ============================================ -->
<!-- PART 1: BASIC TRANSITION -->
<!-- ============================================ -->
<button class="transition hover:bg-blue-600">
Hover me
</button><!-- ============================================ -->
<!-- PART 2: TRANSITION-COLORS -->
<!-- ============================================ -->
<button class="transition-colors duration-200 hover:bg-blue-600 hover:text-white">
Colors only
</button><!-- ============================================ -->
<!-- PART 3: TRANSITION-TRANSFORM -->
<!-- ============================================ -->
<div class="transition-transform duration-300 hover:scale-105">
Scales on hover
</div><!-- ============================================ -->
<!-- PART 4: TRANSITION-OPACITY -->
<!-- ============================================ -->
<div class="transition-opacity duration-500 hover:opacity-50">
Fades on hover
</div><!-- ============================================ -->
<!-- PART 5: DURATION SCALE -->
<!-- ============================================ -->
<div class="transition duration-75">Fast</div>
<div class="transition duration-200">Medium</div>
<div class="transition duration-500">Slow</div>
<div class="transition duration-1000">Very slow</div><!-- ============================================ -->
<!-- PART 6: EASING CURVES -->
<!-- ============================================ -->
<div class="transition ease-linear">Linear</div>
<div class="transition ease-in">Ease in</div>
<div class="transition ease-out">Ease out</div>
<div class="transition ease-in-out">Ease in out</div><!-- ============================================ -->
<!-- PART 7: DELAY -->
<!-- ============================================ -->
<div class="transition-opacity delay-300 opacity-0 hover:opacity-100">
Appears after 300ms
</div><!-- ============================================ -->
<!-- PART 8: COMBINED TRANSITION -->
<!-- ============================================ -->
<div class="transition-all duration-300 ease-in-out delay-150 hover:bg-blue-600">
Complete specification
</div><!-- ============================================ -->
<!-- PART 9: STAGGERED LIST -->
<!-- ============================================ -->
<ul>
<li class="transition delay-75">Item 1</li>
<li class="transition delay-150">Item 2</li>
<li class="transition delay-200">Item 3</li>
</ul><!-- ============================================ -->
<!-- PART 10: CUSTOM EASING -->
<!-- ============================================ -->
<div class="transition ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] hover:scale-110">
Bouncy hover
</div>The ten parts covered basic transition, transition-colors, transition-transform, transition-opacity, the duration scale, easing curves, delay, combined transition, staggered list, and custom easing.
Quick Reference
Transition Properties
| Utility | Properties |
|---|---|
transition-none | None |
transition-all | All |
transition | Common properties |
transition-colors | Color-related |
transition-opacity | Opacity |
transition-shadow | Box-shadow |
transition-transform | Transform |
transition-filter | Filter |
Duration Scale
| Utility | Value |
|---|---|
duration-75 | 75ms |
duration-100 | 100ms |
duration-150 | 150ms |
duration-200 | 200ms |
duration-300 | 300ms |
duration-500 | 500ms |
duration-700 | 700ms |
duration-1000 | 1000ms |
Easing Curves
| Utility | Behavior |
|---|---|
ease-linear | Constant |
ease-in | Slow start |
ease-out | Slow end |
ease-in-out | Slow start and end |
Delay Scale
| Utility | Value |
|---|---|
delay-75 | 75ms |
delay-100 | 100ms |
delay-150 | 150ms |
delay-200 | 200ms |
delay-300 | 300ms |
delay-500 | 500ms |
delay-700 | 700ms |
delay-1000 | 1000ms |
When to Use Each Duration
| Duration | Use Case |
|---|---|
| 75–150ms | Color changes, opacity fades |
| 200–300ms | Transform, shadow, small movements |
| 300–500ms | Panels, modals, larger movements |
| 500–1000ms | Dramatic, deliberate motion |
Best Practices
✅ Do This:
<!-- Use transition-colors for color changes -->
<button class="transition-colors duration-200 hover:bg-blue-600"> <!-- ✅ -->
<!-- Use transition-transform for scale, rotate, translate -->
<div class="transition-transform duration-300 hover:scale-105"> <!-- ✅ -->
<!-- Use ease-out for appearing elements -->
<div class="transition ease-out opacity-0 hover:opacity-100"> <!-- ✅ -->
<!-- Use delay for tooltips and popovers -->
<div class="transition-opacity delay-300 opacity-0 group-hover:opacity-100"> <!-- ✅ -->
<!-- Combine all four for precise control -->
<div class="transition-all duration-300 ease-in-out delay-150"> <!-- ✅ -->
<!-- Use arbitrary values for custom curves -->
<div class="transition ease-[cubic-bezier(...)]"> <!-- ✅ -->❌ Don’t Do This:
<!-- Don't use transition-all when a specific transition fits -->
<div class="transition-all hover:bg-blue-600"> <!-- ⚠️ -->
<!-- Don't animate layout properties -->
<div class="transition-all hover:w-64"> <!-- ❌ jank -->
<!-- Don't forget the transition utility -->
<div class="duration-300 hover:scale-105"> <!-- ❌ no animation -->
<!-- Don't use the same duration for everything -->
<div class="transition duration-1000 hover:bg-blue-600"> <!-- ⚠️ too slow -->
<!-- Don't use delay for critical feedback -->
<button class="transition delay-500 hover:bg-blue-600"> <!-- ⚠️ feels broken -->
<!-- Don't use transition-none on an element that needs transitions -->
<div class="transition-none hover:scale-105"> <!-- ❌ no effect -->Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
| No animation | Missing transition-* | Add a transition utility |
| Animation too fast | Default 150ms too short | Add duration-300 or higher |
| Animation too slow | Duration too long | Use 150–200ms for small changes |
| Janky animation | Animating layout properties | Use transform and opacity |
| Delay feels broken | Delay too long for feedback | Keep delays under 300ms |
| Custom curve ignored | Wrong syntax | Use ease-[cubic-bezier(...)] |
| Transition on mount | Element transitions on first render | Use transition-none initially |
Real-World Examples
1. Button Hover
<button class="transition-colors duration-200 hover:bg-blue-600">Save</button>2. Card Lift
<div class="transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
Card
</div>3. Modal Fade In
<div class="transition-opacity duration-300 opacity-0 data-open:opacity-100">
Modal
</div>4. Tooltip with Delay
<div class="transition-opacity delay-300 opacity-0 group-hover:opacity-100">
Tooltip
</div>5. Image Zoom
<img class="transition-transform duration-500 hover:scale-110" />6. Accordion
<div class="transition-all duration-300 max-h-0 overflow-hidden data-open:max-h-96">7. Link Underline
<a class="transition-colors duration-150 hover:text-blue-600">Link</a>8. Staggered List
<li class="transition delay-75">Item 1</li>
<li class="transition delay-150">Item 2</li>9. Spinner Pulse
<div class="transition-opacity duration-1000 animate-pulse">Loading…</div>10. Bouncy Hover
<div class="transition ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] hover:scale-110">Visual
Transition Properties
┌─────────────────────────────────────────────────────────────┐
│ transition-colors │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ bg-blue-500 │───▶│ bg-blue-600 │ Color changes only │
│ └─────────────┘ └─────────────┘ │
│ │
│ transition-transform │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ scale-100 │───▶│ scale-110 │ Transform only │
│ └─────────────┘ └─────────────┘ │
│ │
│ transition-all │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ everything │───▶│ everything │ All properties │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘Duration Comparison
┌─────────────────────────────────────────────────────────────┐
│ duration-75 (75ms) │
│ ████ │
│ Almost instant. Color changes. │
│ │
│ duration-200 (200ms) │
│ ████████████ │
│ Standard for hover states. │
│ │
│ duration-500 (500ms) │
│ ██████████████████████████████ │
│ Panels, modals. │
│ │
│ duration-1000 (1000ms) │
│ ████████████████████████████████████████████████████████ │
│ Dramatic, deliberate. │
│ │
└─────────────────────────────────────────────────────────────┘Easing Curves
┌─────────────────────────────────────────────────────────────┐
│ ease-linear │
│ ───────────────────────────────────────── │
│ Constant speed. Mechanical. │
│ │
│ ease-in │
│ ────────────────────────────────────────── │
│ Starts slow, speeds up. For exits. │
│ │
│ ease-out │
│ ──────────────────────────────────────── │
│ Starts fast, slows down. For entrances. │
│ │
│ ease-in-out │
│ ──────────────────────────────────────── │
│ Slow start, fast middle, slow end. Default. │
│ │
└─────────────────────────────────────────────────────────────┘Delay Effect
┌─────────────────────────────────────────────────────────────┐
│ WITHOUT DELAY │
│ │
│ Hover: ────────────────────────────── │
│ Effect: ██████████████████████████████ │
│ Immediate │
│ │
├─────────────────────────────────────────────────────────────┤
│ │
│ WITH delay-300 │
│ │
│ Hover: ────────────────────────────── │
│ Effect: ──────────████████████████████ │
│ Waits 300ms, then transitions │
│ │
│ Brief hovers do not trigger the effect. │
│ │
└─────────────────────────────────────────────────────────────┘Summary
| Item | Value |
|---|---|
| Transition property | transition-* |
| Duration | duration-* |
| Easing | ease-* |
| Delay | delay-* |
| Default duration | 150ms |
| Default easing | ease-in-out |
| Common properties | transition |
| Color only | transition-colors |
| Transform only | transition-transform |
| Opacity only | transition-opacity |
| Arbitrary property | transition-[...] |
| Arbitrary easing | ease-[cubic-bezier(...)] |
Key takeaways:
- A transition requires a property change. The
transition-*utility declares which properties will animate, but nothing happens without a state change—a hover, a focus, a class toggle—that changes one of those properties. - The four transition utilities are separate.
transition-*declares what animates.duration-*sets how long.ease-*sets the curve.delay-*sets the wait. All four compose, and each can be varied independently. - Use specific transitions over
transition-all.transition-colorsfor color changes,transition-transformfor scale and rotate,transition-opacityfor fades.transition-allanimates everything, including layout properties that cause jank. - Small changes need short durations. A color shift or an opacity fade feels right at 150–200ms. Larger movements like panels and modals need 300–500ms. Anything over 700ms feels slow unless it is deliberate.
ease-outfor entrances,ease-infor exits. An element that appears should decelerate into place. An element that disappears should accelerate out of view.ease-in-outis the general default and works for most cases.- Delay is for avoiding flicker, not for critical feedback. A tooltip with a short delay avoids appearing when the mouse passes over. A button that delays its hover feedback feels broken. Keep delays short and use them deliberately.
- Custom curves use the arbitrary value form.
ease-[cubic-bezier(...)]allows any timing function, including bouncy and stepped curves that are not part of the default scale.
Remember: Transitions are the difference between a state change and an animation. The transition-* utility declares what animates. The duration-* utility sets how long. The ease-* utility sets the acceleration. The delay-* utility sets the wait. Together they make interactions feel smooth and intentional. Use specific transitions over transition-all, keep durations short for small changes, choose the easing curve based on whether the element is entering or leaving, and use delays sparingly. The four utilities are simple individually; combining them well is what makes the interface feel alive.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!