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

HTML

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

CSS

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

Result

Editor