利用css sprite来实现PNG图片动画，就像GIF一样，也许你会问为什么不直接用GIF来制作，哪是因为GIF制作出来的色彩实际太低，为了得到更好的颜色，所以使用PNG是最好不过了。
HTML部分：
[cce_html]
<img src=”图片地址” />
<div></div>
[/cce_html]

CSS部分：
[cce_css]
div {
width: 50px;
height: 72px;
background-image: url(“图片地址”);
animation: play 1s steps(10) infinite;
}
@keyframes play {
0% { background-position: 0px 0; }
100% { background-position: -500px 0; }
}
[/cce_css]

演示地址：DEMO
这个动画一共有10帧，每帧50px，然后我们用CSS3的animation来实现这个动画，如果你想修改动画播放速度，哪么你修改1s这个时间即可。

这是一个很好代替GIF动画的方案，我们可以利用这个方案画制作高色彩的图片动画或是制作一些Loadding进度条等等，我想日后你会用得上这个方法。