开启GPU硬件加速的动画属性

本文主要是介绍开启GPU硬件加速的动画属性，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

并不是所有的CSS属性都能触发GPU的硬件加速，实际上只有少数属性可以，比如下面的这些：

• transform
• opacity
• filter
  
  

对于transform，2D transform 动画在开始和结束时发生的 repaint 操作，因此建议采用以下方式

.example1 {
  transform: translateZ(0);
}

.example2 {
  transform: rotateZ(360deg);
}

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

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

推荐监测实时监测网页渲染帧速率的方法：
Chrome的DevTool中TimeLine的Frame模块

这篇关于开启GPU硬件加速的动画属性的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！