What is CSS animation

Animation is the effect of gradually changing an element from one style to another.

You can change any number of styles any number of times.

Use percentages to specify when changes occur, or use the words "from" and "to", equivalent to 0% and 100%.

0% is the beginning of the animation, and 100% is the completion of the animation.

For best browser support, you should always define the 0% and 100% selectors.

Instance

Change the background color when the animation is 25% and 50%, and then change it again when animation 100% finishes:

@keyframes myfirst{0%   {background:red;} 25%  {background:yellow;} 50%/  * Firefox */{0%   {background:red;} 25%  {background:yellow;} 50%  /* Safari and Chrome */{0%   {background:red;} 25%  {background:yellow;} 50%/  * Opera */{0%   {background:red;} 25%  {background:yellow;} 50%  {background:blue;} 100% {background:green;}}  

Try it yourself.

Instance

Change the background color and position:

@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}  @-moz-keyframes Myfirst/ * Firefox */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}} @-webkit-keyframes Myfirst /* Safari and Chrome */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}} @-o-keyframes Myfirst/ * Opera */{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}  

Try it yourself.

CSS3 Animation Properties

The following table lists @keyframes rules and all animation properties:

Properties	Description	CSS
@keyframes	Specifies the animation.	3
Animation	The shorthand properties for all animated properties, except for the Animation-play-state property.	3
Animation-name	Specifies the name of the @keyframes animation.	3
Animation-duration	Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.	3
Animation-timing-function	Specifies the speed curve of the animation. The default is "ease".	3
Animation-delay	Specifies when the animation starts. The default is 0.	3
Animation-iteration-count	Specifies the number of times the animation is played. The default is 1.	3
Animation-direction	Specifies whether the animation will play backwards in the next cycle. The default is "normal".	3
Animation-play-state	Specifies whether the animation is running or paused. The default is "running".	3
Animation-fill-mode	Specifies the state outside the object's animation time.	3

The following two examples set all animation properties:

Instance

Run an animation named Myfirst, where all animation properties are set:

Div{animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:2s; animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;/* Firefox: */-moz-animation-name:myfirst;-moz-animation-duration:5s;-moz-animation-timing-function:linear;- moz-animation-delay:2s;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate;- moz-animation-play-state:running; /* Safari and Chrome: */-webkit-animation-name:myfirst;-webkit-animation-duration:5s;- Webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate;-webkit-animation-play-state:running; /* Opera: */-o-animation-name:myfirst;-o-animation-duration:5s;-o-animation-timing-function:linear;-o- animation-delay:2s;-o-animation-iteration-count:infinite;-o-animation-direction:alternate;-o- animation-play-state:running;}  

Instance

Same as the previous animation, but uses the shorthand animation animation property:

Div{animation:myfirst 5s linear 2s infinite alternate;  /* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate; /* Safari and Chrome: */-webkit-animation:myfirst 5s linear 2s infinite alternate; /* Opera: */-o-animation:myfirst 5s linear 2s infinite alternate;}  

What is CSS animation