css3-animation
css3的animation支持动画 ，以前用过transform、transition感觉很酷 ，这个animation 感觉很强大。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animation</title>
<style type="text/css">
.animation
{
width:50px;
height:50px;
border:1px solid black;
-moz-animation-name:animate;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-webkit-animation-name:animate;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}
@-moz-keyframes animate{
from{
background:red;
}
to{
background:blue;
}
}
@-webkit-keyframes animate{
from{
background:red;
}
to{
background:blue;
}
}
#sprite {
width:64px;
height:64px;
background:url(lemmings-walker-sprites.png) 0 0;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:step-start;
-webkit-animation-name:animate01;
-moz-animation-duration:1s ;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:step-start;
-moz-animation-name:animate01;
}
@-webkit-keyframes animate01 {
0% { background-position: 0px 0; }
12.5% { background-position:448px 0; }
25% { background-position:384px 0; }
37.5% { background-position:320px 0; }
50% { background-position:256px 0; }
62.5% { background-position:192px 0; }
75% { background-position:128px 0; }
87.5% { background-position: 64px 0; }
100% { background-position: 0px 0; }
}
@-moz-keyframes animate01 {
0% { background-position: 0px 0; }
12.5% { background-position:448px 0; }
25% { background-position:384px 0; }
37.5% { background-position:320px 0; }
50% { background-position:256px 0; }
62.5% { background-position:192px 0; }
75% { background-position:128px 0; }
87.5% { background-position: 64px 0; }
100% { background-position: 0px 0; }
}
</style>
</head>
<body>
<div class="animation"></div><br />
<div id="sprite"></div>
</body>
</html>
可惜目前支持的浏览器还比较少 firefox5.0和以上支持，webkit的支持最佳，opera暂时没支持，IE10才会支持
参考：http://caniuse.com/css-animation
学习文档：
http://www.w3.org/TR/css3-animations/