May 05, 2021 CSS Reference Manual
The animation
property is a shorthand property for six animation properties:
Note: Always specify the animation-duration property, otherwise the animation will not play if the duration is 0.
Default: | none 0 ease 0 1 normal |
---|---|
Inheritance: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.animation="mymove 5s infinite" |
animation: name duration timing-function delay iteration-count direction;
Value | Describe |
---|---|
animation-name | Specifies the keyframe name that needs to be bound to the selector. |
animation-duration | Specify the time it takes to complete the animation, in seconds or milliseconds. |
animation-timing-function | Specifies the speed curve of the animation. |
animation-delay | Specify the delay before the animation starts. |
animation-iteration-count | Specifies the number of times the animation should be played. |
animation-direction | Specify whether the animation should be played back in turn. |
Use short-case properties to bind the animation to the div element:
Attributes | |||||
---|---|---|---|---|---|
animation |
43.0
4.0 -webkit- |
10.0 |
16.0
5.0 -moz- |
9.0
4.0 -webkit- |
30.0
15.0 -webkit- 12.0 -o- |
Internet Explorer 10, Firefox, and Opera support the animation property.
Safari and Chrome support alternative -webkit-animation properties.
Note: The animation property is not supported by Internet Explorer 9 and earlier versions.
CSS3 tutorial: CSS3 animation