Layout Shift本质是浏览器重排引发的视觉抖动，仅用transform和opacity可避开90%问题；width/height/margin等属性直接修改盒模型，强制重算布局树，推挤周边元素，而transform走GPU合成层，不触发布局计算。
动画过程中的 Layout Shift 本质是浏览器重排（Reflow）触发的视觉抖动，**只用 transform 和 opacity 就能避开 90% 的问题**——这两个属性走的是合成层（Compositor），不触发布局计算。
为什么 width/height/margin 会引发 Layout Shift
这些属性直接修改盒模型尺寸或位置，每次变化都迫使浏览器重新计算整个布局树。比如 width: 0 → 100px 不仅改变自身，还可能推挤兄弟元素、影响父容器高度，甚至导致下方内容上跳。
- 常见错误场景：悬停下划线用
width+display: block；模态框入场用top+left定位；加载动画中动态设置padding - 伪元素（如
::after）若设display: block或float，也会参与文档流，宽度变化照样引发重排 - 即使动画只持续 300ms，只要中间有 layout 触发点，帧率就可能掉到 30fps 以下
必须用 transform 替代位移类属性
把所有涉及位置、缩放、旋转的动画，统一迁移到 transform 上。它不改变文档流，GPU 直接合成，且支持硬件加速。
- ❌ 错误写法：
left: 0; transition: left 0.3s;→ 触发 layout - ✅ 正确写法：
transform: translateX(0); transition: transform 0.3s; - 注意：
translateZ(0)或translate3d(0, 0, 0)可强制创建独立合成层，但别滥用——每个额外合成层都吃内存 - 慎用
will-change: transform：只在真正需要提前告知浏览器的复杂动画上加，比如长列表滚动中持续运动的卡片
容器必须预设尺寸并隔离渲染作用域
动画元素的父容器若尺寸不定，子元素 transform 位移时仍可能引起周边布局“呼吸感”——比如父容器因子元素溢出而撑大，或因 overflow: visible 导致动画溢出影响兄弟节点。
立即学习“前端免费学习笔记（深入）”；
- 给动画容器加
overflow: hidden（如 magic.css 中的_magictime.scss基础类） - 对 FastUI 类框架的动态表单容器，提前设
min-height或用contain: layout锁定渲染边界 - 图片/iframe 必须带
width和height属性，或用 padding-top 占位（如padding-top: 56.25%实现 16:9） - 滚动容器加
scrollbar-gutter: stable，避免滚动条出现/消失时左右挤压
怎么确认修复生效
光看动画丝滑还不够，得验证 Layout Shift 是否真被消灭。
- Chrome DevTools → Performance 面板 → 录制操作 → 勾选
Layout Shift Regions，红色高亮区域就是残余抖动源 - 用
PerformanceObserver监听layoutShift条目，重点看sources数组里的node和currentRect变化 - 注意：
includeSources: true必须显式开启，否则sources是空数组 - 哪怕只是
font-display: swap导致的文本重排，也会计入 CLS —— 字体加载策略和动画优化是一体两面
最常被忽略的点：动画本身没问题，但父容器没锁死、图片没占位、滚动条没预留空间——这些“配角”才是 Layout Shift 的真实推手。
