Css Sprites 图片动画（Animation）

以前总是看到些利用css sprites来制作各种各样的人物动画效果，突然上午一时兴起，于是乎也就自己动手做了个玩玩。

要说最早看到这个效果，应该是在Google（当时为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham)，Google涂鸦出现了一个舞蹈的动画，引得一时轰动。）不过那时还是利用js，制作人员把图片的位置都计算好，然后封装到js，用js把动画效果模拟出来。

随着现在css3的逐渐强大，我们直接利用css3的animate和keyframes属性就能完成（有Flash基础的会很容易理解）。

HTML CODE:

<div class="set standby"></div>

CSS CODE:

.standby {
	width: 120px;
	height: 150px;
	background-image: url("images/sailormars.png");
	-webkit-animation: standby 1.3s steps(8) infinite;
}
@-webkit-keyframes standby {
	from { background-position:0 0; }
	to { background-position: -960px 0; }
}

看完代码，是不是感觉so easy？

接下来说明几个注意事项：
1.animation:[动画名称] || [动画持续时间] || [动画步骤] || [动画循环次数]
2.steps(x)，代表动画的步骤，x你有几个人物效果就写几个。
3.起始帧frome中的参数，代表动画的起始位置。
4.最后帧to中的参数，代表动画的结束位置。

DemoDownload