CSS3 Animation

CSS3 brings a good variety of features to improve your web page, one of them is animation. With this you can easily replace animated GIFs or flash movies by creating simple CSS code.

Here's a basic example of an image rotation:

CSS

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg);
  }
}
#spinWrapper {
  position: relative;
  margin: 100px 0 0 200px;
}
#spinImage {
  background: url(spiral-1.png) 0 0 no-repeat;
  position: absolute;
  top: -60px;
  left: -45px;
  width: 275px;
  height: 292px;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 1000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 1000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
}

HTML

<div id="spinWrapper">
  <img src="http://www.bookofzeus.com/download/spiral.png" alt="spiral" id="spinImage" />
</div>

Demo