CSS3 animation properties
Examples
Use shorthand property animation to bind to a <div> element:
div
{
animation: mymove 5 s infinite ; - Webkit-animation: mymove 5 s infinite ; / * Safari and Chrome * /
}
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
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- |
Defaults: | none 0 ease 0 1 normal |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.animation = "mymove 5s infinite" |
grammar
animation:animation: name duration timing-function delay iteration-count direction fill-mode play-state;;
value | Explanation |
---|---|
animation-name | Specifies the name to be bound to select the key frames |
animation-duration | Animation Specifies how many seconds or milliseconds |
animation-timing-function | How to set up the animation will complete a cycle |
animation-delay | Animating before starting delay interval. |
animation-iteration-count | Define the animation plays. |
animation-direction | Specifies whether to turn back the animation. |
animation-fill-mode | Provisions when the animation does not play (when the animation is complete, or when there is a delay in the animation does not start playing), to be applied to the style element. |
animation-play-state | Specifies whether the animation is running or paused. |
initial | Set the property to its default value. Read the information about initial. |
inherit | Properties inherited from the parent element. Read the information about initinherital. |
related articles
CSS3 tutorial: CSS3 Animation