文章探讨了CSS动画中出现抖动的问题，指出硬件加速（如translate3d和will-change属性）在提升性能的同时可能导致抖动。通过结合使用transform:translate3d(0,0,0)和will-change，可以改善动画效果。此外，为避免重复的布局计算和重绘，建议使用requestAnimationFrame进行动画优化。
1. css动画出现抖动情况有很多, 我查阅了一些资料, 说其中主要的影响是硬件加速的开启, 硬件加速是利用GPU来加速页面渲染, 来提高页面性能. 但是开启硬件加速同时也会产生动画抖动.这种情况下我通过以下办法去做的
transform: translate3d(0,0,0); 作用就是提前开启硬件加速 // 放在父组件中使用
will-change: transform; 作用就是告诉浏览器有些元素需要改变了 请提前做好优化准备 // 尝试过单独使用 但是没有配合使用效果好 (可根据自身情况处理 两个都可以单独使用)
把上面两个属性配合使用
2. 动画出现了重复的布局计算和重绘, 像这种情况我采用了以下方法处理
使用requestAnimationFrame来优化动画的性能
扫一扫
1644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
