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

posted @ 2022-01-23 23:21  IslandZzzz  阅读(100)  评论(0)  编辑  收藏  举报