开启GPU加速提升CSS3动画性能

最近遇到了，由于css3中动画效果较多，导致的页面卡顿的问题。

一、利用3D开启硬件加速

除了优化我们的代码，我们还可以让GPU来代替CPU渲染页面。

通过设置transform: translate3d(0, 0, 0)或者tanslateZ(0)属性就可以做到， 原因是，通过设置该属性，浏览器会创建独立图层，图层中有动画的话用GPU进行硬件加速。

二、其他属性

还有其他的属性可以出发GPU的硬件加速

• opacity
• filter

三、缺点

• 过多元素开启硬件加速的话，也是会影响性能的。
• 使用GPU渲染会影响字体的抗锯齿效果。