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%，这个方法仍是比较可用的。