CSS animations are a new an clever way to manage simple animations in webpages without the need for jquery, flash or javascript.
Page elements can be transitioned from one style value to another example.
Here I will be explaining and showing examples of how it works.

to get things to work Chrome and safari must harness web-kit and firefox it’s mox- prefeix
Currently css animations are not supported in any IE browser (surprise surprise).

Below is a simple example of what can be achieved. It doesn’t look like much, but considering there is no javascript or flash powering it, its cool.

Lets look at the nuts and bolts of the example animation

when using Css animations, make sure you use the html5 doctype in the html file

page.html

<!DOCTYPE html>

style sheet

div
{
width:100px;
height:100px;


/* this top section names your animation and determines the time, in this case the name is 'myAnimation' and the duration is 2 seconds */

animation:myAnimation 2s;  
-moz-animation:myAnimation 2s; /* Firefox */
-webkit-animation:myAnimation 2s; /* Safari and Chrome */




/* in this section I tell the animation to play on an 'infinite' loop, this can be replaced with an integer.  I also tell the animation to 'alternate' this tells it to play backwards after it finishes  */

animation-iteration-count:infinite;
animation-direction:alternate;

/* Firefox */
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;

/* chrome and safari */
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;

}



/* in this section we start a new style property with @ which deals with the animation transition, 'from' is the start of the animation and 'to' is the end. */
@keyframes myAnimation 
{
from {margin-left:0; background-color:blue; width:100px; height:100px;}
to {margin-left:400px; background-color:orange; width:70px; height:70px;}
}

@-moz-keyframes myAnimation /* Firefox */
{
from {margin-left:0; background-color:blue; width:100px; height:100px;}
to {margin-left:400px; background-color:orange; width:70px; height:70px;}
}

@-webkit-keyframes myAnimation /* Safari and Chrome */
{
from {margin-left:0; background-color:blue; height:100px;}
to {margin-left:400px; background-color:orange; height:70px;}
}

It is also possible to use % iterations instead of the ‘from / to’ – this tells the animation to ‘so something when x% of your duration time passes’.
Update your @ keyframe sections in the above example with the below, and can also set your animation time to 4 or 5 seconds and remove the direction alternate stuff


@keyframes myAnimation
{
0%   {background: red; left:0px; top:0px;}   //0% of the duration time.
25%  {background: yellow; left:200px; top:0px;}  //25% of the duration time.
50%  {background: blue; left:200px; top:200px;}  //50% of the duration time.
75%  {background: green; left:0px; top:200px;}  //75% of the duration time.
100% {background: red; left:0px; top:0px;}  //100% of the duration time.
}

@-moz-keyframes myAnimation/* 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 myAnimation/* 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;}
}

The main problem with all this is.. it’s a hell of alot of code to do simple things, this is mainly because of the different requirements for different browsers. I personally would likely use a line of jquery to handle all of this, as it gives better control. With that said, its in your best interest to be aware of css3 animations and how they work, as they will be more prevalent in the future as browsers standards align.

Tweak the examples it an play around. For a full list of css3 animation properties go to w3schoolds css3 animation guide