CSS3 animation-delay Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The animation-delay CSS property defines when the animation will start (e.g. a value of 2s, indicates that the animation will begin 2 seconds after it is applied). The value of this property can be specified in seconds (s) or milliseconds (ms).
The following table summarizes the usages context and the version history of this property.
| Default value: | 0s |
|---|---|
| Applies to: | All elements, ::before and ::after pseudo-elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the animation-delay property in action.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s;
/* Standard syntax */
animation-name: moveit;
animation-duration: 4s;
animation-delay: 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Note: Negative values are allowed for this property. However, it will appear to have begun executing partway through its animation cycle e.g. the animation delay of -2s makes the animation start at once, but starts 2 seconds into the animation.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
| time | Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. The default value is 0s. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element animation-delay property. |
Browser Compatibility
The animation-delay property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Animations.
Related properties and at-rules: animation, animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, @keyframes.
