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
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.animationDelay

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