transition-delay defaults to 0s, meaning a transition begins animating immediately once its watched property changes — a nonzero delay instead postpones the actual start of the animation by that amount of time, useful for staggering multiple elements' transitions to start at slightly different moments rather than all beginning simultaneously, or intentionally delaying a hover effect's start to avoid triggering it on a quick, accidental mouse pass-over. A negative delay value is also valid, and causes the transition to begin partway through its full animation, as if it had already been running for that amount of time before it actually started.
1Understanding Transition-delay
transition-delay defaults to 0s, meaning a transition begins animating immediately once its watched property changes — a nonzero delay instead postpones the actual start of the animation by that amount of time, useful for staggering multiple elements' transitions to start at slightly different moments rather than all beginning simultaneously, or intentionally delaying a hover effect's start to avoid triggering it on a quick, accidental mouse pass-over. A negative delay value is also valid, and causes the transition to begin partway through its full animation, as if it had already been running for that amount of time before it actually started.
Use different transition-delay values on a set of similar elements, like a series of list items, to create a staggered animation effect where each one begins its transition slightly after the previous one, rather than all animating in perfect unison.
.tooltip {
opacity: 0;
transition: opacity 0.2s ease;
transition-delay: 0.3s;
}
.trigger:hover .tooltip {
opacity: 1;
}2Practical Example
Here is a real-world application of Transition-delay showing how it is used in production CSS code.
.item-1 { transition-delay: 0s; }
.item-2 { transition-delay: 0.1s; }
.item-3 { transition-delay: 0.2s; }3Best Practices
Follow these guidelines when working with Transition-delay:
1. Use staggered transition-delay values across a set of similar elements to create a sequential, staggered animation effect rather than everything animating simultaneously
2. Consider a small transition-delay on a hover effect specifically to avoid triggering an unwanted animation from a brief, accidental mouse pass-over
3. Remember transition-delay only postpones when the animation starts, it doesn't change the actual transition-duration, the length of time the animation itself takes to play out
Tip: Use different transition-delay values on a set of similar elements, like a series of list items, to create a staggered animation effect where each one begins its transition slightly after the previous one, rather than all animating in perfect unison.
.tooltip {
opacity: 0;
transition: opacity 0.2s ease;
transition-delay: 0.3s;
}
.trigger:hover .tooltip {
opacity: 1;
}