css 动画执行时影响布局怎么办_只对脱离布局的属性做动画

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 —— 从初始定位、动画属性选择，到父级合成策略，缺一不可。