让浏览器知道你需要硬件加速,满足其一即可
perspective
backface-visibility
transform:translateZ(x)
opacity
filters
Will-change
优点:
动画不会引起回流重绘
缺点:
会导致内存占用较大,会有性能问题
在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速,会产生字体模糊
代码示例:
perspective: 1000px;
backface-visibility: hidden;
transform: translateZ(0);