animation-delay property specifies when an animation should start.
You can begin the animation at a future point in time, immediately and from its beginning, or immediately and partway through the animation cycle.
animation-delay value can be defined in seconds (s) or milliseconds (ms).
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.
|Applies to||all elements|
|Computed value||as specified|
|Animatable||no See animatable properties.|
Start the animation after 2 seconds:
Start the animation with negative value (-2s):
The numbers in the table specify the first browser version that fully supports the
Numbers followed by -webkit- and -moz- specify the first version that worked with a vendor prefix.
The following table describes the values of
|time||Defines the number of seconds (s) or milliseconds (ms) to wait before the animation should start. 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 partway through its cycle.|
|initial||Sets this property to its default value|
|inherit||Inherits this property from its parent element|
CSS Animation tutorial
CSS @keyframes property