脱离文档流可根除页面抖动，需确保动画元素有定位祖先并使用transform/opacity；错误锚定或混用layout属性仍会导致抖动。
页面抖动不是动画“不流畅”，而是浏览器在每一帧里反复重排（reflow）——只要动画属性还连着文档流，抖动就很难根除。核心解法就一条：让动画元素彻底脱离文档流，且不留下布局副作用。
为什么脱离文档流能止抖
抖动源头是 width、height、left、top、margin、float 这类属性变化时，浏览器必须重新计算元素尺寸、位置及周围元素的布局关系。哪怕只是 1px 偏移，视觉上就是“跳”。position: absolute 或 position: fixed 让元素完全退出文档流，后续所有 transform、opacity 变化都不再触发重排，只走合成层（compositor）。
- ❌ 错误认知：“加了
absolute就万事大吉”——若父容器没设position: relative，它会相对于html定位，下划线可能飞到屏幕左上角 - ✅ 正确前提：动画元素的**最近定位祖先**必须存在，且显式声明
position: relative（或absolute/fixed） - ⚠️ 注意：
display: flow-root虽能稳定浮动父容器高度，但它不脱离文档流，对动画抖动无效
脱离文档流后动画该用什么属性
脱离后仍用 width、left、margin 过渡，依然会触发重绘（repaint），部分浏览器甚至因尺寸语义残留间接引发重排。真正零开销的组合只有两个：
-
transform（含translateX、scaleX、rotate等）——GPU 合成，不触发布局与绘制 -
opacity——纯合成属性，浏览器直接混合图层 - ? 禁止混用：比如同时写
left: 100px和transform: translateX(100px)，后者虽覆盖前者，但样式引擎仍可能做冗余计算 - ? 示例：下划线从左到右展开，应写
transform: scaleX(0)→transform: scaleX(1)，而非改width
容易被忽略的兼容性补丁
旧版 Safari 或某些安卓 WebView 对 transform 的亚像素渲染不稳定，scaleX(0.999) 可能导致边缘模糊或轻微跳变。此时需主动干预合成路径：
立即学习“前端免费学习笔记（深入）”；
- 加
backface-visibility: hidden：强制启用更稳定的 GPU 合成层，单行生效，无副作用 - 兜底
transform: translateZ(0)：在极老环境里也能触发硬件加速（注意别和will-change混用） - ⚠️
will-change: transform不要常驻：JS 动画开始前动态设置，结束后立刻清空，否则长期占用内存且可能干扰滚动性能 - 验证是否生效：Chrome DevTools → Rendering → 勾选 “Paint flashing”，播放动画时看是否只有目标元素闪红（说明仅重绘），再进 Layers 面板确认有独立图层生成
真正难的不是加 absolute，而是确保它锚定在正确的父容器上；也不是知道该用 transform，而是在 hover、keyframes、JS 动态控制三类场景中统一用法、不混入任何 layout 属性。一旦漏掉一个 position: relative，或某处悄悄写了 margin-left，抖动就会回来。
