CSS3图片帧动画性能优化

有的复杂动画效果我们没办法用CSS3直接完成，设计师会给出图片序列帧，我们合成雪碧图，通过steps改变background-position的方式来实现动画，如Demo: https://ningwenjing.github.io...
代码如下：

.ico-vip{width: 44px;height: 30px;overflow: hidden;position: relative;background: url(spr-vip.png) no-repeat;animation: aniVip 1.5s steps(34) infinite;}
@keyframes aniVip {
    0%{background-position: 0 0;}  
    100%{background-position: -1564px 0}
}

但是使用这种写法会导致配置比较差的电脑CPU消耗比较明显。在Chrome按shift+esc查看任务管理器，可以看到CPU的占用会变化，这个值的最高点还是比较高的。

background-position不断的改变会造成浏览器不断重绘而导致CPU上升，可以点开Chrome开发者工具中的Layers看到，绘制一直在不断地改变：

在网上查了一下，有同学建议不要用background-position，可以用translate来代替。于是尝试了一下：https://ningwenjing.github.io...
代码如下：

.ico-vip{width: 44px;height: 30px;overflow: hidden;}
.ico-vip:after{content:''; width: 1564px;height: 30px;background: url(spr-vip.png) no-repeat;animation: aniVip 1.5s steps(34) infinite;display: block;}
@keyframes aniVip {
    0%{transform: translate3d(0,0,0)}  
    100%{transform: translate3d(-1564px,0,0)}
}

这种写法不会导致重绘，可以减少CPU的消耗。

测试在比较差的机器上测试，CPU可以从20%减少到4%，这个方法还是比较可用的。