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

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
Edge Chrome Firefox Opera Safari
124316309
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
4316309443

Last updated by CSSPortal on: 31st December 2023