CSS动画不触发重排的条件是仅使用transform和opacity；涉及width、height、left、top等布局属性则会强制重排；transform虽安全但有子元素定位偏移或overflow裁剪等间接影响。
css动画不会触发重排（layout）的条件
绝大多数 CSS 动画本身不改变元素的几何属性（如 width、height、left、top、margin、padding、border），因此不会触发浏览器的 layout（重排）。只要只使用 transform 和 opacity 这两个属性做动画，就能确保只走合成层（compositor），完全避开 layout 和 paint 阶段。
常见安全写法：
-
transform: translateX(100px)✅ -
transform: scale(1.2)✅ -
transform: rotate(45deg)✅ -
opacity: 0.5✅
这些操作由 GPU 合成线程处理，不影响文档流，也不会导致其他元素位置重算。
哪些 css 动画会强制触发重排
一旦动画涉及布局相关的属性，浏览器必须重新计算元素尺寸和位置，进而引发重排 —— 这是性能杀手，尤其在动画帧率要求高的场景下。
立即学习“前端免费学习笔记（深入）”；
以下属性在 @keyframes 或 transition 中使用时，会直接触发 layout：
-
width/height -
left/right/top/bottom（需配合position: relative/absolute） -
margin/padding/border-width -
font-size（影响行高、内联盒尺寸） -
display（如从none切换到block）
例如：
@keyframes bad-move {
to { left: 100px; width: 200px; }
}
这段动画每帧都会触发布局计算，实际性能远低于用 transform: translateX(100px) 实现的同等视觉效果。
transform 动画也可能间接影响布局的例外情况
虽然 transform 本身不触发重排，但有两类容易被忽略的副作用：
- 动画元素设置了
transform后，若其子元素使用position: absolute且依赖父级尺寸（比如top: 50%），而父级又因 transform 导致包含块变化（如transform创建新的 stacking context 或 containing block），可能使子元素定位结果偏移 —— 这不是重排，但布局表现“意外” - 使用
transform: scale()时，若父容器有overflow: hidden，缩放后内容溢出可能被裁剪，视觉上像“布局错位”，实则是裁剪边界未随缩放更新（此时可加transform: scale(1)强制创建独立层）
另外：will-change: transform 能提前提示浏览器该元素将动画化，有助于创建合成层，但滥用会导致内存占用上升，不建议全局设置。
如何验证动画是否触发重排
Chrome DevTools 提供直接观测手段：
- 打开 Rendering 面板 → 勾选
Layout Shift Regions和Paint Flashing - 在 Performance 面板录制动画过程 → 查看火焰图中是否有长条状的
Layout任务 - 用 JavaScript 监听强制同步布局：在动画中读取
offsetHeight、getBoundingClientRect()等会触发回流，应避免
一个典型误判点：看到元素“动了”，就以为是重排 —— 其实大部分平滑移动只是合成层纹理位移，和布局毫无关系。关键看是否改变了 box model 尺寸或位置计算逻辑。
真正需要警惕的，是那些看似无害却悄悄拖慢帧率的属性变更，比如在滚动中给元素加 transition: margin 0.3s —— 它比 transform: translateY() 慢一个数量级，而且不可预测。
