Home CSS Properties transition-delay CSS transition-delay Property Definition
Definition and Usage The transition-delay property sets how long to wait after a property value changes before the transition effect starts.
The default is 0s (start immediately). Use positive times to pause first, or a negative time to jump partway into the effect. Pair it with transition-duration
Baseline · Widely available. Not deprecated. Cross-browser since about September 2015.
Shorthand tip. In transitionsecond time value is the delay (the first is duration).
Syntax
CSS Syntax transition-delay: <time> | <time>, <time> | initial | inherit ;
One or more times, comma-separated. Units: s or ms.
Values
Property Values Value Description Try it 0sStart immediately (default) 0.5sWait half a second, then transition 1sWait one second before starting -0.5sStart now, already halfway into a 1s duration Multiple Different delays for different properties initialResets to 0s
Approach
How to Use transition-delay Delay only waits — you still need a duration (and a property that changes).
Set transition-propertytransition-duration Add transition-delay on the base rule (same place as the other transition longhands). Change the property on hover, focus, or a class toggle. For staggered UI, give each item a slightly larger delay. Try it
Live Preview Duration stays at 0.8s. Change only the delay, then press Toggle to start the wait + fade.
Code
CSS Examples Each snippet uses a fixed duration so you can feel only the delay. Use Try It Yourself for a live editor.
1. Positive delay 2. Negative delay 3. Staggered delays Example 1 — Positive Delay Wait 0.5s, then fade the background over 0.6s.
<style>
.btn {
background: #2563eb;
color: #fff;
transition-property: background-color;
transition-duration: 0.6s;
transition-delay: 0.5s;
}
.btn:hover,
.btn:focus-visible {
background: #dc2626;
}
</style>
<button class="btn" type="button">Wait 0.5s</button> How It Works Property + duration. Color will animate for 0.6s once it starts.Delay waits first. 0.5s holds the old color.Then it fades. After the wait, blue moves toward red.On leave too. The same delay applies when returning to blue.Example 2 — Negative Delay A negative delay starts immediately, already partway through the duration.
<style>
.btn {
background: #2563eb;
color: #fff;
transition-property: background-color;
transition-duration: 1s;
transition-delay: -0.5s;
}
.btn:hover,
.btn:focus-visible {
background: #16a34a;
}
</style>
<button class="btn" type="button">Skip halfway</button> How It Works Duration is 1s. A full fade would take one second.Delay is -0.5s. The browser pretends 0.5s already ran.Starts mid-fade. You see the second half of the color change.Feels faster. Useful when you want a snappier start without shortening duration.Example 3 — Staggered Delays Give each item a larger delay so they animate one after another.
<style>
.dot {
background: #2563eb;
transition: background-color 0.4s ease;
}
.row:hover .a { transition-delay: 0s; background: #f59e0b; }
.row:hover .b { transition-delay: 0.15s; background: #f59e0b; }
.row:hover .c { transition-delay: 0.3s; background: #f59e0b; }
</style>
<div class="row">
<span class="dot a"></span>
<span class="dot b"></span>
<span class="dot c"></span>
</div> How It Works Same duration. Each dot fades in 0.4s.Different delays. 0s, 0.15s, then 0.3s.Hover/focus the row. Dots turn amber in sequence.Stagger pattern. Common for menus, cards, and checklist reveals.Edge Cases & Pitfalls Delay is easy to misread if duration is missing or the shorthand order is wrong.
duration Delay is not duration transition-delay only waits. Without a positive transition-duration
shorthand Second time = delay In transition: color 0.4s 0.2s, 0.4s is duration and 0.2s is delay.
lists Multiple delays map to properties Delays pair with the transition-property
both-ways Delay applies both directions Unless you override it on the hover/focus rule, leaving the state also waits the same delay.
vs-animation Not the same as animation-delay animation-delaytransition-delay waits before a property transition.
Compatibility
Browser Support transition-delay is a browser CSS property for transition timing. Node.js, Deno, and Bun do not apply it.
✓ Baseline · Widely available
transition-delay Chrome 26+, Firefox 16+, Safari 9+, Edge 12+, IE 10+. Widely available since September 2015.
Google Chrome 26+
Full support
Mozilla Firefox 16+
Full support
Apple Safari 9+
Full support
Microsoft Edge 12+
Full support
Opera 12.1+
Full support
Samsung Internet 1.5+
Full support
Internet Explorer 10+
Full support transition-delay Widely supported
Bottom line: Safe for modern UI timing. Keep delays short for interaction feedback. It is not a runtime API.
Remember
Key Takeaways Role: wait before a transition starts after a value changes.
Default: 0s — no wait.
Negative: starts mid-transition as if time already passed.
Needs duration: delay alone does not create motion.
One line: use transition-delay to wait before a CSS transition begins.
Frequently Asked Questions What does the CSS transition-delay property do? It sets how long to wait after a property changes before the transition effect starts.
What is the default value of transition-delay? The default is 0s, so the transition begins immediately.
Can I use milliseconds? Yes. Use s or ms, for example 0.5s or 500ms.
What does a negative delay do? The transition starts immediately but as if it had already been running for that time, so you jump partway into the effect.
Is transition-delay inherited? No. Set it on each element that needs a delayed transition.
Which browsers support transition-delay? It is Baseline and widely available since about September 2015. It is a browser CSS property, not a Node.js feature.
About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
