English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The animation CSS property is a shorthand property of the following propertiesanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-modeandanimation-play-state.
The following table summarizes the usage context and version history of this property.
| Default value： | none 0 ease 0 1 normal none running; |
|---|---|
| Applies to： | All elements::before and::after Pseudo-element |
| Inheritance： | None |
| Animatable： | No.See also Animation properties. |
| Version： | CSS3new feature |
| JavaScript syntax: | object.style.animation="mymove 5s infinite" |
The syntax of this property is as follows:
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit
This example demonstrates how to use the animation property.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: moveit 2s linear 0s infinite alternate;
animation: moveit 2s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Test and see‹/›Note:At least two properties animation must be specified-name and animation-duration (greater than 0) to make the animation occur.
The following table describes the value of this property.
| Value | Description |
|---|---|
| animation-name | Specify the name of the @keyframes definition to be applied to the selected element. |
| animation-duration | Specify the number of seconds or milliseconds required for the animation to complete one cycle. |
| animation-timing-function | Specify how the animation should progress within each cycle, i.e., the easing function. |
| animation-delay | Specify the delay before the animation starts. |
| animation-iteration-count | Specify the number of times the animation should play before stopping. |
| animation-direction | Specify whether the animation should play in reverse in alternating cycles. |
| animation-fill-mode | Specify how the style should be applied to the target before and after the CSS animation is executed. |
| animation-play-state | Specify whether the animation should run or pause. |
| initial | Set this property to its default value. |
| inherit | If specified, the associated element uses the computed value of animation of its parent element. |
Browser compatibility of the animation property, all mainstream browsers support this property. The number indicates the first browser version that supports this property.
|
Please refer to the following tutorials:CSS3Animation.
Related properties and rules:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.