加了position: absolute还在抖不是absolute没用，而是未锚定到正确父容器，导致元素相对于html定位、布局崩塌；必须让父容器显式设position: relative，并统一使用transform/opacity动画属性，禁用width/left等触发布局的属性。
为什么加了 position: absolute 还在抖
不是 absolute 没用，而是它没锚定到正确的父容器上。浏览器会把元素相对于 <html> 定位，下划线飘到左上角、弹窗飞走、兄弟元素上移——这看起来像抖，其实是布局崩塌。
检查 computed 样式里的 offsetParent，如果不是你预期的父元素，说明定位上下文缺失。
- 父容器必须显式声明
position: relative（哪怕没其他用途） - 别依赖
display: inline-block或float来“撑开”父容器——浮动本身就会触发重排 -
display: flow-root虽能稳定父容器高度，但不脱离文档流，对动画抖动无效
哪些 CSS 属性一动就触发重排
left、top、width、height、margin、border 这些属性只要变化，浏览器就必须重新计算整个布局树。哪怕只在某一个关键帧里写了 margin-top: 2px，整条动画链都会退回低效路径。
- 禁止混用：
transform: translateX(100px)和left: 100px同时存在，后者虽被覆盖，但样式引擎仍可能做冗余计算 -
transition: all 0.3s是抖动高发配置——它会偷偷给border、padding等也加过渡 - 伪元素（
::after）用width做下划线动画？改用transform: scaleX()替代
怎么验证 transform 动画真生效了
光写 transform 不代表它进了合成层。旧版 Safari 或某些安卓 WebView 对 scaleX(0.999) 的亚像素渲染不稳定，边缘模糊或轻微跳变，这不是 bug，是合成器管线没被强制启用。
立即学习“前端免费学习笔记（深入）”；
- 加一行
backface-visibility: hidden：单个动画元素加即可，不改变视觉，但强制启用更稳定的 GPU 合成路径 - 兜底用
transform: translateZ(0)：极老环境有效，注意别和will-change混用 -
will-change: transform必须动态设置：JS 动画开始前加，结束后立刻清空（element.style.willChange = 'auto'），否则长期占用内存且干扰滚动
最容易被忽略的混合陷阱
哪怕 keyframes 全用 transform，只要 CSS 文件里还残留一句 margin-left: 20px 或 top: 10px，整条动画链就退回低效路径。抖动常来自“写一半”的迁移——比如把 hover 动画改了，但初始状态还是靠 left 定位。
- 初始化也要统一用
transform：避免left: 0+transform: translateX(100px)这种混合写法 - 浮动元素动画必抖：
float本身就是重排触发器，第一步不是加优化，是先移除它，改用display: flex或position: absolute - 伪元素动画要单独声明
transition，且只作用于transform，否则容易出现“滞后一帧”的视觉撕裂
真正难的不是加 absolute，而是确保它锚定在正确的父容器上；也不是知道该用 transform，而是在 hover、keyframes、JS 动态控制三类场景中始终统一用法、不混入任何 layout 属性。
