CSS3 animation Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state.
The following table summarizes the usages context and the version history of this property.
| Default value: | |
|---|---|
| Applies to: | All elements, ::before and ::after pseudo-elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the animation property in action.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: moveit 2s linear 0s infinite alternate;
/* Standard syntax */
animation: moveit 2s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Note: You must specify at least two properties animation-name and the animation-duration (greater than 0), to make the animation occur.
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
animation-name |
Specifies the name of @keyframes defined animations that should be applied to the selected element. |
animation-duration |
Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation. |
animation-timing-function |
Specifies how the animation will progress over the duration of each cycle i.e. the easing functions. |
animation-delay |
Specifies a delay before the animation will start. |
animation-iteration-count |
Specifies the number of times an animation cycle should be played before stopping. |
animation-direction |
Specifies whether or not the animation should play in reverse on alternate cycles. |
animation-fill-mode |
Specifies how a CSS animation should apply styles to its target before and after it is executing. |
animation-play-state |
Specifies whether the animation is running or paused. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element animation property. |
Browser Compatibility
The animation property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 Animations.
Related properties and at-rules: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, @keyframes.
