触发布局（重排）的CSS属性包括width、height、top、left、margin、padding、border、font-size等；动画中应仅用transform和opacity，避免使用会触发重排的属性。
哪些 CSS 属性触发布局（重排）？
修改 width、height、top、left、margin、padding、border、font-size 等会改变元素几何尺寸或位置的属性，都会触发浏览器重新计算布局（reflow），开销极大。
动画中应完全避免用这些属性做关键帧变化。比如用 left 实现位移，哪怕加了 transform: translateX(0) 也拦不住重排——因为 left 本身已触发布局计算。
- ✅ 推荐：只用
transform（translate、scale、rotate）和opacity - ❌ 避免：
top/left、margin、width、height、box-shadow（部分情况）、background-position（非硬件加速时）
如何确保 transform 动画走 GPU 加速？
不是所有 transform 都自动上 GPU。浏览器只对「合成层」（compositing layer）启用硬件加速，而合成层需满足特定条件才会被创建。
常见误操作是给元素加 transform: translateZ(0) 或 will-change: transform 就以为万事大吉——但若父容器有 overflow: hidden、filter、mask 等，可能压制子元素的合成层提升。
立即学习“前端免费学习笔记（深入）”；
- ✅ 检查是否真有合成层：Chrome DevTools → Layers 面板，看动画元素是否有独立图层
- ✅ 更稳妥写法：
transform: translate3d(0, 0, 0)（比translateZ(0)兼容性略好） - ⚠️
will-change: transform不要滥用：提前声明会常驻合成层，内存占用上升；仅在动画开始前 1–2 帧设置，结束后设回auto
为什么 animation-timing-function 影响帧率？
cubic-bezier(0.42, 0, 0.58, 1)（即 ease-in-out）这类缓动函数本身不卡顿，但若关键帧中混入非合成属性（如 background-color），浏览器就无法预测下一帧样式，被迫降级为软件渲染，导致掉帧。
