css怎么使用gpu加速,用CSS3开启GPU硬件加速来提升网站的动画渲染性能

CSS3为咱们开发动画效果大大提升了效率，但有些动画效果，如果涉及的DOM元素比较多，会发现有“卡卡”的感觉，为动画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硬件加速。

当然也可以这样开启所有浏览器的GPU硬件加速：

webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

或者

webkit-transform: translate3d(0,0,0);

-moz-transform: translate3d(0,0,0);

-ms-transform: translate3d(0,0,0);

-o-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

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

-webkit-backface-visibility:hidden;

-webkit-perspective:1000;