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

<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

Desktop
10	12	43	16	30	9
Tablets / Mobile
43	43	16	30	9	4.0

Last updated by CSSPortal on: 17th October 2019