CSS transition-delay Property

Description

The transition-delay property defines when the transition will start. It allows a transition to begin execution some period of time from when it is applied. A 'transition-delay' value of '0s' means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

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

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

HTML

<div class="test"> delay 1s </div> 

<div class="test2"> delay 2s </div> 

<div class="test3"> delay 900ms </div>

CSS

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; 
}

Result