CSS transition-delay Property

Description

The transition-delay CSS property is used to control the delay before a CSS transition effect begins after a triggering event, such as a hover or click. It allows web developers to create smoother and more controlled animations by specifying a time period (in seconds or milliseconds) that must elapse before the transition starts. This property is particularly useful when coordinating multiple transitions on an element or when you want to stagger the timing of different aspects of an element's transformation. By adjusting the transition-delay, you can achieve precise timing and synchronization in your web page animations, enhancing the user experience.

Initial value
0s
Applies to
All elements, :before and :after pseudo elements
Inherited
No
Computed value
Same as specified value
Animatable
No
JavaScript syntax
object.style.transitionDelay

Interactive Demo

Hover over me
to see transition.

Syntax

transition-delay: <time> [, <time>]*

Values

  • <time>Is the amount of time to wait between a property's value changing and the start of the animation effect.

Example

<div class="test"> delay 1s </div> 
<div class="test2"> delay 2s </div>
<div class="test3"> delay 900ms </div>
div {
   width: 90px;
   height: 90px;
   background-color: yellow; 
   border: 5px dashed black; 
   display: inline-block; 
   margin-right: 15px; 
} 
div:hover { 
   height: 200px;  
 } 
.test { 
   transition-duration: 5s; 
   transition-delay: 1s;  
} 
.test2 {
   transition-duration: 2s; 
   transition-delay: 2s;
} 
.test3 { 
   transition-duration: 400ms; 
    transition-delay: 900ms; 
} 

Browser Support

The following table will show you the current browser support for the CSS transition-delay property.

Desktop
Edge Chrome Firefox Opera Safari
12261612.19
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
26162191.54.4

Last updated by CSSPortal on: 2nd January 2024