animation-delay
animation-delay
This page has been flagged with the following issues:
High-level issues:
W3C Working Draft
Summary
The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.
Overview table
| Initial value | 0s
|
|---|---|
| Applies to | all elements, before and after pseudo-elements |
| Inherited | No |
| Media | visual |
| Computed value | as specified |
| Animatable | No |
| CSS Object Model Property | |
Syntax
-
animation-delay: time
Values
- time
- Floating-point number, followed by a time units designator (
ms[milliseconds] ors[seconds]). For more information about the supported time units, see CSS Values and Units Reference.
Examples
View live exampleA delay of half a second. Example shows a delay of 5 seconds.
CSS
animation-delay: 500ms;
Usage
The animation-delay property delays the start of an animation by the amount specified in seconds (s) or thousandths of a second (ms). If a negative value is specified, the animation starts immediately, but at the point it would have reached at the specified offset. So, if the animation is four seconds long, and the delay is set to minus two seconds, it begins halfway through.
Values are rounded up to the second decimal place. If multiple values are specified as a comma-separated list, each animation-delay is paired with a corresponding animation-name. If more animation-delay values are declared than corresponding animation-name values, the excess animation-delay values are ignored. If fewer animation-delay values are declared than corresponding animation-name values, the list of animation-delay values is repeated from the beginning until the animation-name values are exhausted.
Syntax
animation-delay:
<time>
[ ,
<time>
] *
Standards information
- CSS Animations Module Level 3, Section 3.8
Related specifications
| Specification | Status | Related Changes |
|---|---|---|
| CSS Animations | Working Draft |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 4.0 -webkit |
16.0 5.0 -moz |
10 | 12.1 12.0 -o |
4.0 -webkit
|
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 2.1 -webkit |
7.0 -webkit |
18.0 -webkit |
16.0 15.0 -moz |
WP 8 (IE 10) | 12.1 | Unsupported | 3.2 -webkit
|
Compatibility notes
| Browser | Version | Note |
|---|---|---|
| Internet Explorer | 10.0 | The -ms- prefixed property is deprecated and should not be used. |
See also
Related articles
Animation
- animation-delay
External resources
http://www.w3.org/TR/css3-animations/#animation-delay-property
Related pages (MSDN)
CSSStyleDeclarationcurrentStylestyleaabbracronymbbdobigbrcitecodedfnemiimginputkbdlabelqsampselectsmallspanstrongsubsuptextAreattvaraddressblockQuotedivdlfieldSetformnoFramesnoScriptolppretable
This article contains content originally from external sources.
Portions of this content come from the Mozilla Developer Network 
: Article
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here