CSS animation-delay Property

Description

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

Initial value

0s

Applies to

All elements, :before and :after pseudo elements

Inherited

No

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.animationDelay

Interactive Demo

animation-delay: 0s;

animation-delay: 500ms;

animation-delay: 4s;

animation-delay: -2s;

Syntax

animation-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="warn fadeInTop">Important message to users!</div>

<div class="message">Demonstration of animation-delay property, if you missed it, just click on either HTML or CSS above and then click on Result.</div>

.warn { 
   background: #fc0; 
   padding: 10px; 
   top: -100px; 
   position: absolute; 
   left: 0; 
   right: 0; 
} 
.fadeInTop { 
   -webkit-animation-name: 
   fadeInTop; -webkit-animation-duration: 1s; 
   -webkit-animation-delay: 2s; 
   -webkit-animation-fill-mode: forwards; 
   animation-name: fadeInTop; 
   animation-duration: 2s; 
   animation-delay: 1s;  
   animation-fill-mode: forwards; 
} 
@-webkit-keyframes fadeInTop { 
   from { 
      top: -100px; 
   } 
   to { 
      top: 0; 
   } 
} 
@keyframes fadeInTop { 
   from { 
      top: -100px; 
   } 
   to { 
      top: 0; 
   } 
}
.message {
   margin-top: 50px;
}

Browser Support

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

Desktop
12	43	16	30	9

Tablets / Mobile
43	16	30	9	4	43

Last updated by CSSPortal on: 31st December 2023