典型布局抖动源于transition触发重排，应仅对transform、opacity等合成属性做过渡；避免在浮动、inline元素或table-cell上使用；用DevTools定位并优化。
transition 触发重排导致布局抖动的典型现象
页面元素加了 transition 后，鼠标悬停或状态切换时出现“卡顿”“跳动”“文字模糊”，甚至触发整行/整块位置偏移——这不是动画慢，是浏览器在每帧都偷偷做了 layout（重排）。常见于用 width、height、top、left 等会触发布局计算的属性做过渡。
只对 will-change 和 transform/opacity 做 transition
CSS 动画稳定性的核心是避开 layout 和 paint 阶段，只走 composite（合成）。能安全过渡的属性极少：
-
transform（推荐用translateX/scale，别用translate混写百分比+px） -
opacity（注意：值必须是 0–1 之间的小数，opacity: 0.5可，opacity: 50%不可） -
filter（部分浏览器支持硬件加速，但 Safari 对blur()过渡不稳）
示例：把原本 margin-left: 0 → 20px 的过渡，改成 transform: translateX(0) → translateX(20px)，抖动立刻消失。
避免 transition 作用在浮动、inline 元素或 table-cell 上
这些元素的尺寸和位置高度依赖上下文流，哪怕只改 opacity，也可能因父容器重排间接引发抖动。真实踩坑场景：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block的按钮加transition: all .2s→ 悬停时周围文字微移 - 表格中某
td设置transition: background-color→ 整行高度偶发跳变 - 父元素用了
float: left，子元素加transform过渡 → 在旧版 Chrome 中仍触发 layout
解法统一：给过渡元素加 will-change: transform，并确保其为 block 或 inline-flex，脱离文本流干扰。
用 DevTools 快速定位抖动根源
别靠肉眼猜。打开 Chrome DevTools → Rendering 面板 → 勾选 Layout Shift Regions 和 Paint Flashing，再触发动画：
- 看到大面积黄色闪烁？说明频繁 paint，检查是否用了
background-image或渐变过渡 - 红色边框跳动出现？代表 layout 发生，立刻查 transition 属性和元素 display 类型
- 左上角显示 “FPS: 32” 且波动剧烈？大概率有非合成属性参与动画，用
transform: translateZ(0)强制提升图层试试（仅调试用，勿上线）
真正稳定的过渡，FPS 应稳定在 58–60，且 Layout 和 Paint 时间栏几乎压成一条线。
过渡不是加个 transition 就完事；浏览器底层怎么走通路，决定了用户看到的是丝滑还是抽搐。最常被忽略的，是明明写了 transform，却因为父元素 overflow: hidden 或 contain: layout 被截断图层提升，结果又掉回主渲染线程。
