CSS3实现雪碧图动画

注意几点（以下示例）：

雪碧图：
由22张图片拼成的，雪碧图的宽度是设置动画元素的22倍

关键帧设置：
@keyframes test_anim{
    0%{ background-position:0 0;}
    100%{ background-position:-2200px 0;}
}

引用关键帧动画：
animation:test_anim 2.2s steps(22) both;
steps(22) 是关键，动画将均匀地分22段执行，每次都有固定相等的偏移量

.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;}
}

ps：关于苹果手机rem布局时，雪碧图动画显示跳动问题解决方法：
1、原雪碧图，最后一帧后，再加一帧空白（无显示功能）
2、关键帧100%时设置：100%{ background-position:right 0;}
3、引用动画时，steps设置：最终雪碧图帧数减1（最后一帧无显示功能）

/* 注：1rem=28px */
.test_rem{ width: 5.357142rem; height: 5.214285rem; background-image:url(../img/test_rem.png); background-repeat:no-repeat; background-position:0 0; background-size:26.785714rem;
	-webkit-animation:test_rem .2s steps(4) both infinite alternate;
			animation:test_rem .2s steps(4) both infinite alternate;
}
@-webkit-keyframes test_rem{
	0%{ background-position:0 0;}
	100%{ background-position:right 0;}
}
@keyframes test_rem{
	0%{ background-position:0 0;}
	100%{ background-position:right 0;}
}

test_rem.png：