CSS transition-delay Property

This property specifies the amount of time to wait before a transition effect actually begins after a property change is triggered.

selector { transition-delay: <time>; }
<time> Defines the time interval to wait before the transition starts, expressed in seconds or milliseconds.

Code Examples

A basic example showing a box that waits half a second before beginning its color transition when a user hovers over it.

<style>
.delay-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition-property: background-color;
  transition-duration: 1s;
  transition-delay: 0.5s;
}
.delay-box:hover {
  background-color: #e74c3c;
}
</style>
<div class="delay-box"></div>

An advanced example using JavaScript to apply incremental delays to a group of elements, creating a professional staggered entrance effect.

<style>
.list-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.5s ease-out;
  padding: 10px;
  background-color: #f1f1f1;
  margin-bottom: 5px;
}
.list-item.active {
  opacity: 1;
  transform: translateX(0);
}
</style>
<div id="list-container">
  <div class="list-item">Step 1</div>
  <div class="list-item">Step 2</div>
  <div class="list-item">Step 3</div>
</div>
<button onclick="reveal()">Run Sequence</button>
<script>
function reveal() {
  const items = document.querySelectorAll(".list-item");
  items.forEach((item, index) => {
    item.style.transitionDelay = (index * 150) + "ms";
    item.classList.add("active");
  });
}
</script>

Pro Tip

You can use negative delay values to sync different elements that have different durations. By setting a negative delay, you effectively skip the start of the transition, allowing you to jump straight into the action while keeping the overall timing of a complex animation sequence in sync.

Deep Dive

Think of transition-delay as a fuse on a firework. You light the fuse when the user hovers or clicks, but the explosion of movement or color doesn't happen until that fuse burns down. It accepts values in seconds "s" or milliseconds "ms". If you set a positive value, the transition will pause for that duration before moving. If you use a negative value, the transition will start instantly but appear to be already partially completed, as if it began in the past. It is an essential tool for sequencing multiple elements so they don't all move at the exact same moment, which can look robotic.

Best Practices

Keep your delays short, usually under 500ms, to keep the interface feeling snappy and responsive. Use staggered delays for groups of items like list rows or image cards to create a polished, choreographed flow that leads the user's eye through the content.

Common Pitfalls

The most common mistake is forgetting the unit. Writing "transition-delay: 500;" is invalid and the browser will ignore it; you must write "500ms". Also, remember that a very long delay might make a user think the website is broken because nothing happens immediately when they interact with it.

Accessibility

Avoid using long delays for interactive elements like menus or buttons. Users with cognitive disabilities or those using assistive technologies may become confused if there is a significant gap between their action and the visual feedback. Always test your UI to ensure it feels responsive to all users.

Dev Data Table: transition-delay property

default 0s
animatable no
inherited no
experimental no
year_intro 2009
year_standard 2012
js_syntax_1 element.style.transitionDelay = "500ms";
js_syntax_2 element.style.setProperty("transition-delay", "500ms");
js_note Ensure you include the time unit as a string when manipulating this property in JavaScript or the change will not take effect.
browsers { "Chrome": 26, "Edge": 10, "Firefox": 16, "Safari": 6.1, "Opera": 12.1, "Chrome Android": 26, "Safari on iOS": 7, "Samsung Internet": 1, "Opera Mobile": 12.1 }
results render here...