CSS动画出现抖动的问题

1. css动画出现抖动情况有很多, 我查阅了一些资料, 说其中主要的影响是硬件加速的开启, 硬件加速是利用GPU来加速页面渲染, 来提高页面性能. 但是开启硬件加速同时也会产生动画抖动.这种情况下我通过以下办法去做的

transform: translate3d(0,0,0);  作用就是提前开启硬件加速 // 放在父组件中使用

will-change: transform; 作用就是告诉浏览器有些元素需要改变了  请提前做好优化准备 // 尝试过单独使用  但是没有配合使用效果好  (可根据自身情况处理 两个都可以单独使用)

把上面两个属性配合使用

CSS动画出现抖动的问题_第1张图片

 CSS动画出现抖动的问题_第2张图片

2. 动画出现了重复的布局计算和重绘, 像这种情况我采用了以下方法处理

使用requestAnimationFrame来优化动画的性能

CSS动画出现抖动的问题_第3张图片

 

你可能感兴趣的:(css,动画,前端)