CSS3实现雪碧图动画

CSS3实现雪碧图动画

注意几点：

steps(22) 是关键哦

关键帧只需设置0%（ background-position:0 0;），100%（ background-position:-2200px 0;）

动画均匀地分22段执行，每次都有固定相等的偏移量

雪碧图由22张图片拼成的

雪碧图的宽度是设置动画盒子的22倍

以下CSS：

.test{ width:100px; height:100%; background-image:url(text.png); background-repeat:no-repeat; background-position:0 0; background-size:2200px;
-webkit-animation:test_anim 2.2s steps(22) both;
animation:test_anim 2.2s steps(22) both;
}
@-webkit-keyframes test_anim{
0%{ background-position:0 0;}
100%{ background-position:-2200px 0;}
}
@keyframes test_anim{
0%{ background-position:0 0;}
100%{ background-position:-2200px 0;}
}