transition-delay
Sets the amount of time to wait before starting a transition once it has been triggered. This is useful for staggered animations or making hover effects feel more intentional.
Quick example
.tooltip {
opacity: 0;
transition: opacity 0.3s;
/* Waits 0.2 seconds before showing the tooltip on hover */
transition-delay: 0.2s;
}
.trigger:hover .tooltip {
opacity: 1;
}Quick facts
Initial value
0sInherited
No
Applies to
all elements and pseudo-elements
Animation type
notAnimatable
transition-delay Browser Support
Widely available Since 2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
26+
16+
9+
12+