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

<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

Desktop
10	12	26	16	12.1	9
Tablets / Mobile
4.4	26	16	12.1	9	1.5

Last updated by CSSPortal on: 2nd November 2019