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

2022/1/24 6:07:22

本文主要是介绍开启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硬件加速的动画属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程