遇到的问题

Chrome下的动画比IE9和FF都要慢很多，通过chrome的DevTool中TimeLine监控，发现动画的代码逻辑并没有占用太多资源，反倒是painting消耗了大量的时间，平均才30fps左右。
chrome对于渲染多张大尺寸图片方面一直表现疲软，chrome中只要存在大量缩放图片，页面滚动的时候就会极其卡顿，就像是用一台2004年的电脑访问一个2014年的网站一样。chrome对于渲染很多大尺寸图片(尤其是alphy透明度PNG24图片)方面有先天的不足。

解决Chorme动画“卡顿”的办法

为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU，其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform:translateZ其实是为了渲染3D样式，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。
这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地。
当然也可以这样开启所有浏览器的GPU硬件加速：

webkit-transform:translateZ(0);
-moz-transform:translateZ(0);
-ms-transform:translateZ(0);
-o-transform:translateZ(0);
transform:translateZ(0);

或

webkit-transform:translate3D(0);
-moz-transform:translate3D(0);
-ms-transform:translate3D(0);
-o-transform:translate3D(0);
transform:translate3D(0);

使用-webkit-transform:transition3d(0,0,0)开启GPU硬件加速的chrome中渲染动画性能明显顺畅了许多，平均能达到55fps左右。

chrome诡异的bug

对所有动画DOM元素添加-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后，又出现了一个chrome诡异的Bug，当你有多个position:absolute;元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后，会有几个元素凭空消失。

如何避免这个问题

在使用-webkit-transform尝试对很多DOM元素编写3D动画时，尽量不要对这些元素及他们的父元素使用position:absolute/fixed。
。。
减少使用-webkit-transform:transition3d(0,0,0)的DOM元素数量。

开启GPU硬件加速可能触发的问题：

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速的适用范围：

1、使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
2、页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
3、使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。
4、编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)。
5、使用很多PNG图片拼接成CSS Sprite时。