使用transform和opacity替代布局属性动画，避免重排；通过硬件加速和will-change优化渲染，指定具体transition属性，减少样式读写，可消除CSS动画抖动。
在使用CSS transition 实现元素动画时，经常会出现视觉上的“抖动”或卡顿现象。这通常不是因为浏览器性能不足，而是由于过渡过程中触发了不必要的重排（reflow）或重绘（repaint）。要解决这个问题，关键在于理解浏览器渲染机制，并针对性地优化CSS属性和硬件加速的使用。
避免触发重排的属性过渡
某些CSS属性在变化时会强制浏览器重新计算布局（重排），例如 width、height、top、left 等。这些操作开销大，容易导致页面抖动。
推荐做法是优先使用不会触发重排的属性进行过渡：
- transform：用于位移、缩放、旋转等，由合成器（compositor）处理，性能最佳
- opacity：透明度变化同样走合成层，效率高
transform: translateX(100px) 替代 left: 100px，可显著提升流畅度。
启用硬件加速提升动画流畅性
通过将元素提升到独立的合成层，可以让GPU参与渲染，减少主线程压力。
立即学习“前端免费学习笔记（深入）”；
常用方法是使用 transform 或 will-change 来触发硬件加速：
- 添加
transform: translateZ(0)或translate3d(0,0,0)强制开启GPU加速 - 合理使用
will-change: transform提前告知浏览器该元素将发生变化
优化 transition 属性写法
不要对所有属性使用通用 transition：
- 避免写
transition: all 0.3s ease - 明确指定需要动画的属性，如
transition: transform 0.3s, opacity 0.3s
这样可以防止意外触发动画，也能让浏览器更高效地优化渲染路径。
减少频繁的样式读写
JavaScript 中频繁读取元素尺寸（如 offsetTop、offsetWidth）再修改样式，会导致强制同步重排。
建议：
- 批量处理样式变更，先读取所有值，再统一写入
- 使用
requestAnimationFrame协调动画节奏 - 尽量用 class 切换来控制状态，而非直接操作 style
基本上就这些。核心思路是：用 transform 和 opacity 做动画，避免布局变动，合理启用硬件加速，精细控制 transition 范围。这样既能消除抖动，又能保证动画丝滑。不复杂但容易忽略细节。
