 Abakada: Back to Basics > Language References > CSS Properties > Animation Properties > animation-delay Property
Sets or retrieves the start delay of the associated animation effect.
| CSS |
{ animation-delay: time } |
| Script |
object.style.animationDelay = time |
| Parameter |
Description |
Valid Values |
| time |
Sets the length of time before an animation starts. |
floating point number representing a time value expressed as seconds (s) or milliseconds (ms) |
The property is read/write with a default value of 0s; this attribute is not inherited.
The animation-delay property defines when the animation will start.
animation-delay is specified as a time offset, that allows an animation to begin execution some time after it is applied, or to appear to have begun execution some time before it is applied.
A positive value indicates that the animation should begin after the specified amount of time has elapsed.
A negative value causes the animation to begin immediately, but is automatically progressed by the absolute value of the delay, meaning the animation will start partway through its cycle at the offset of the inverse value.
A value of 0s is implied when no delay is specified.
 NOTE: While the separate animation properties can be set individually, the shorthand animation property offers a convenient option to set all animation properties at once.
The following examples demonstrate the effect of applying the animation-delay property.
The following examples demonstrate use of animation-delay in multi-image scenarios.
For a brief overview, please see Understanding and Using CSS Animations.
animation, animation-composition, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timeline, animation-timing-function
|