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.
It is documented as part of the CSS Transitions specification.
Syntax
/* Usage 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;
}
/* Global values */
transition-delay: inherit;
transition-delay: initial;
transition-delay: revert;
transition-delay: revert-layer;
transition-delay: unset;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.
26+
16+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more