css3怎么开启硬件加速？

动画卡顿在移动web开发的过程中是会经常遇到的，解决这个问题，一般都会用到css3开启硬件加速。这个名字听起来很高大上，但是它做的事情很简单，就是通过GPU（Graphics Processing Unit）进行渲染，解放CPU。 　

CSS的animation、tranform、transition并不会自动开启GPU加速，而是通过浏览器的缓慢的软件渲染引擎来实现执行，那么我们怎么才能实现GPU加速呢，很多浏览器提供了某些触发该模式的规则。

比如使用 translate3d() rotate3d() scale3d()　这几个方法，我们就可以使用ＧＰＵ加速了。

但是呢，某些情况下，我们并不想要对元素应用３Ｄ变换的效果，却还想要实现ＧＰＵ加速，这是我们就可以使用简单的ＣＳＳ属性来“欺骗”浏览器了，　触发硬件加速。

transform: translateZ(0)

这个声明就是可以触发桌面端和移动端的GPU加速，这是一个非常有效的方式（包含所有的浏览器前缀）：

.cube {
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      /* Other transform properties here */
   }

如下几个css属性可以触发硬件加速：

• transform

• opacity

• filter

• will-change：哪一个属性即将发生变化，进而进行优化。

注意:

• 不能让每个元素都启用硬件加速，这样会暂用很大的内存，使页面会有很强的卡顿感。

• GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。

推荐：css3手册

以上就是css3怎么开启硬件加速？的详细内容，更多请关注0133技术站其它相关文章！