Property Description
The animation property is a shorthand property that allows setting six of the animation properties at once.
This property has the following syntax:
animation: name duration timing-function delay iteration-count direction fill-mode play-state|initial|inherit;
Property Values
| Value | Description |
|---|---|
| name | Specifies the name of the keyframe you want to bind to the selector |
| duration | Specifies the duration in seconds or milliseconds of the animation |
| timing-function | Specifies the duration in seconds or milliseconds of the animation |
| delay | Specifies a delay before the animation will start |
| iteration-count | Specifies the number of times to play the animation |
| direction | Specifies whether or not the animation should play in reverse on alternate cycles |
| fill-mode | Specifies what values are applied by the animation outside the time it is executing |
| play-state | Specifies whether the animation is running or paused |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
Examples
This example shows an animation moving three different colored boxes from left to right using the animation shortcut:
<style type="text/css">
div.box1
{
width:50px;
height:50px;
background:blue;
position:relative;
animation:boxmove 5s ease 0 infinite normal;
/* Firefox */
-moz-animation:boxmove 5s ease 0 infinite normal;
/* Safari and Google Chrome */
-webkit-animation:boxmove 5s ease 0 infinite normal;
}
div.box2
{
width:50px;
height:50px;
background:red;
position:relative;
animation:boxmove 5s ease 2s infinite normal;
/* Firefox */
-moz-animation:boxmove 5s ease 2s infinite normal;
/* Safari and Google Chrome */
-webkit-animation:boxmove 5s ease 2s infinite normal;
}
div.box3
{
width:50px;
height:50px;
background:green;
position:relative;
animation:boxmove 5s ease -2s infinite normal;
/* Firefox */
-moz-animation:boxmove 5s ease -2s infinite normal;
/* Safari and Google Chrome */
-webkit-animation:boxmove 5s ease -2s infinite normal;
}
@keyframes boxmove
{
from {left:0px;}
to {left:210px;}
}
@-moz-keyframes boxmove /* Firefox */
{
from {left:0px;}
to {left:210px;}
}
@-webkit-keyframes boxmove /* Safari and Google Chrome */
{
from {left:0px;}
to {left:210px;}
}
</style>
<div class="box1"></div>
<br/>
<div class="box2"></div>
<br/>
<div class="box3"></div>
This produces the following result:
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 4.0 -webkit- | 16.0 5.0 -moz- |
10.0 | 4.0 -webkit- | 12.1 12.0 -o- 15.0 -webkit- |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | CSS3 |
| Default Value: | none 0s ease 0s 1 normal none running |