CSS animation Property
Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myDiv 5s infinite;
}
@keyframes myDiv {
from {left: 0px;}
to {left: 200px;}
}Meaning
The animation shorthand CSS property applies an animation between styles.
It is a shorthand for:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
| Default value: | none 0 ease 0 1 normal none running |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit|revert|revert-layer|unset;Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
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-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
animation: none 0 ease 0 1 normal none running;
}More Examples
The following example uses six animation properties:
Example
div {
animation-name: demo;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}The following example apply same animation by using the shorthand animation property:
Example
div {
animation: demo 5s ease-in-out 2s infinite alternate;
}