开启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模块

标签：动画,translateZ,transform,硬件加速,webkit,GPU,属性
来源： https://www.cnblogs.com/ltfxy/p/15837828.html