CSS3 Animation
Sunday, January 15, 2012 EST
by: Eric Potvin
Tags:css
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/source/spiral.png" alt="spiral" id="spinImage" />
</div>
Demo
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
CSS3 Animation | Book Of Zeus<a href="http://www.bookofzeus.com/articles/css3-animation/" title="CSS3 Animation">CSS3 Animation | Book Of Zeus</a>
Short URL:
CSS3 Animation | Book Of Zeus<a href="http://s.bookofzeus.com/82KNB" title="CSS3 Animation Short URL">CSS3 Animation | Book Of Zeus</a>