transform 和 opacity 动画不触发重排，因其属合成属性，不改变文档流与几何尺寸，直接交由合成线程处理；适合高性能动画的仅有 transform（如 translate/scale/rotate）和 opacity。
为什么 transform 和 opacity 动画不触发重排
浏览器渲染流水线中，transform 和 opacity 属于「合成属性」——它们的变更不会影响文档流、不改变元素几何尺寸或位置关系，因此跳过 Layout（重排）和 Paint（重绘），直接交由合成线程处理。而 left、top、width、height、margin 等会强制触发 Layout，动画一跑，页面就卡。
哪些 CSS 属性适合做高性能动画
只对以下两类属性做动画，基本可避免布局抖动：
-
transform：包括translateX/Y/Z、scale、rotate、skew，全部基于 GPU 合成，无重排 -
opacity：透明度变化不改变盒模型，仅影响图层混合
⚠️ 注意：transform: translate(0) 本身不触发重排，但若元素原本是 static 定位，加了 transform 会隐式创建新的层叠上下文和包含块，可能影响 z-index 或 overflow 行为，这不是重排，但属于意外副作用。
如何把「会触发布局」的动画改造成安全的
常见错误写法：
@keyframes slide {
from { left: 0; }
to { left: 100px; }
}——left 必须配合 position: relative/absolute，但依然会重排。
正确替换方式：
立即学习“前端免费学习笔记（深入）”；
- 用
transform: translateX(0)替代left: 0 - 用
transform: translateY(-50%)替代top: -50%（注意：百分比在top中相对父容器高，而在transform中相对自身尺寸） - 避免在动画中切换
display、visibility（后者可动画，前者不行）、height/max-height（除非用transform: scaleY()模拟）
容易被忽略的「伪脱离」陷阱
你以为加了 transform 就万事大吉？这些情况仍可能拖慢动画：
- 动画元素父容器设置了
will-change: transform，但子元素用了filter（如blur(2px)）——filter会强制新建合成层并触发额外 Paint - 在
@keyframes中混用transform和color：虽然color只触发 Paint，但 Paint 和 Composite 同步瓶颈下，帧率仍可能掉 - 大量元素同时动画且未启用硬件加速：确保根元素或动画容器有
transform: translateZ(0)或will-change: transform（慎用，别滥用）
真正脱离布局的动画，不是靠加个属性，而是整条链路都避开 Layout —— 从初始定位、动画属性选择，到父级合成策略，缺一不可。
