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

transition-delay: 250ms;
transition-property: margin-right;

transition-delay: 1s;
transition-property: background-color;

transition-delay: 1s;
transition-property: margin-right, color;

transition-delay: 1s, 250ms;
transition-property: margin-right, color;

transition-delay: 1s, 250ms, 2s;
transition-property: margin-right, color, background-color;

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
12	26	16	12.1	9

Tablets / Mobile
26	16	21	9	1.5	4.4

Last updated by CSSPortal on: 2nd January 2024