rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

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

spiral