🎯 CSS transition-delay Property

The transition-delay property specifies how long a transition should wait before it starts. It allows you to delay the beginning of a CSS transition effect, creating more controlled and dynamic animations.

Instead of starting immediately when a property changes, the browser waits for the specified delay time and then begins the transition.

The transition-delay property controls the waiting period before an animation begins. It works together with transition-property, transition-duration, and transition-timing-function.

• Delays the start of a transition
• Creates staged animation effects
• Supports seconds and milliseconds
• Improves animation timing control

Time values define how long the browser waits before starting the transition.

.box {
    transition-delay: 0.5s;
}
                

You can use seconds (s) or milliseconds (ms).

transition-delay: 1s;
transition-delay: 0.2s;
transition-delay: 500ms;
transition-delay: 1000ms;
                

During the delay period, no visible animation occurs. The transition begins only after the specified waiting time has passed.

Resets the property to its default value, which is 0s.

.box {
    transition-delay: initial;
}
                

With the default value, transitions start immediately when a property changes.

The following example delays an opacity animation before it starts.

.box {
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-delay: 0.3s;
}

.box:hover {
    opacity: 0.3;
}
                

When the user hovers over the element, the browser waits 0.3 seconds before starting the opacity transition. The fade effect then completes in 0.5 seconds.

The transition-delay property helps create more professional and controlled animations by allowing transitions to start after a defined pause.

• Create staggered animation effects
• Improve user interaction timing
• Build more engaging UI animations
• Add pauses before transitions begin
• Enhance animation sequencing