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 value0s
  • Applies toAll elements, :before and :after pseudo elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.animationDelay

Syntax

Formal syntax: <time> [, <time>]*

animation-delay: <time>;

Values

  • <time>Is the amount of time to wait between a property's value changing and the start of the animation effect.

Example

.class {
   animation-delay: 5s;
}

Browser Support

?Firefox?Explorer?Chrome?Safari?Opera

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.