CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS3 animation-delay Property
Example
Wait two seconds, then start the animation:
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
-webkit-animation-delay:2s; /* Safari and Chrome */
Try it yourself »
More examples at the bottom of this page.
Browser Support
The animation-delay property is supported in Internet Explorer 10, Firefox, and Opera.
Safari and Chrome support an alternative, the -webkit-animation-delay property.
Note: The animation-delay property is not supported in Internet Explorer 9 and earlier versions.
Definition and Usage
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" |
Syntax
animation-delay: time;
| Value | Description | Play it |
|---|---|---|
| time | Optional. Defines the number of seconds or milliseconds to wait before the animation will start. Default value is 0 | Play it » |
Try it Yourself - Examples
Example
Negative values, notice that the animation starts 2 seconds into the animation cycle:
animation-delay: -2s /* W3C and Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari and Chrome */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari and Chrome */
Try it yourself »
Related Pages
CSS3 tutorial: CSS3 Animations
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
