CSS animation-delay Property
More "Try it Yourself" examples below.
Definition and Usage
The animation-delay property specifies a delay for the start of an animation.
The animation-delay value is defined in seconds (s) or milliseconds (ms).
| Default value: | 0s |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.animationDelay="1s" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| animation-delay | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
CSS Syntax
animation-delay: time|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | Play it » |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Using negative values. Here, the animation will start as if it had already been playing for 2 seconds:
div {
animation-delay: -2s;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Animations
HTML DOM reference: animationDelay property
