ExampleWait two seconds, then start the animation:
Try it yourself » More examples at the bottom of this page. |
The animation-delay property is not supported in any browsers.
Safari and Chrome support an alternative, the -webkit-animation-delay property.
The animation-delay property defines when the animation will start.
The animation-delay value is defined in seconds (s) or milliseconds (ms).
Tip: Negative values are allowed, -2s makes the animation start at once, but starts 2 seconds into the animation.
Default value: | 0 |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.animationDelay="2s" |
animation-delay: time; |
Value | Description |
---|---|
time | Optional. Defines the number of seconds or milliseconds to wait before the animation will start. Default value is 0 |
![]() |
Try it Yourself |
ExampleNegative values, notice that the animation starts 2 seconds into the animation cycle:
Try it yourself » |