hi, today i’m going talk about new version of css (Cascading_Style_Sheets).if you new to the css, visit here . The new version is CSS 3.There are lot of new css properties  in css3.

Most of  current browsers may not support these new properties of css (ex :IE 6).check here to know about compatible browsers.Specially  this article is about css animation properties .Still only web kit browsers support for css animation property.So this work only Google Chrome &  Safari   I hope upcoming versions of FF,IE,opera will support all css3 properties.Well ,Be prepare to explore new CSS 3 world .

OK, here is simple example.(use Google Chrome or   Safari ) >)

first here is the styles to divs

here i gave div id as Wheel1.You can gave any name. but use the same name for the css style.

Like this :- < div id="wheel1" class="rwheel1">

Also I set position,width,height etc, using css class called rwheel1.

background-image property is set image for the div.here I rotate this div tag, so I set width and height same value.

and background-position set background image center to  the div(Both X And Y).

#wheel1 {

-webkit-animation-name: rotating_anticlockwise;

-webkit-animation-duration: 5s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-timing-function: linear;

}

.rwheel1 {
position:absolute;
width:104px;
height:104px;
background-repeat:no-repeat;
background-position:center center;
z-index:10;
left: 387px;
top: 85px;
background-image: url(Untitled-1.png);
}

now the animating part,There are NO any java script  animation just pure CSS

@-webkit-keyframes rotating_clockwise

{

from{
-webkit-transform: rotate(-360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}

This ,similar to key frame animation, first type  @-webkit-keyframes and put name for it I use rotating_clockwise

(this is like a function)

after {  type

from{
-webkit-transform: rotate(-360deg);
}

(  -webkit-transform: is  the property and rotate is the parameter.  )

to {
-webkit-transform: rotate(0deg);
}

now you can understand rotate -360 degree to  0 degree. so now div rotate .if you change them like this

from{
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}

It r otate other way(anti clock wise)

Now call this in div:

#wheel1 {

-webkit-animation-name: rotating_anticlockwise;

-webkit-animation-duration: 5s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-timing-function: linear;

}

set the duration in second,-webkit-animation-iteration-count:infinite mean rotate animation forever.

here is example

Hope you enjoy this article . Thank U Please need to know your ideas so comment please