加了position: absolute还在抖是因为未锚定到预期父容器，导致元素相对于定位而失控；必须让父容器显式设position: relative，并统一使用transform/opacity动画属性，禁用left、width等触发布局的属性。
为什么加了 position: absolute 还在抖
不是 position: absolute 没用，而是它没锚定到你预期的父容器上。浏览器会把元素相对于 定位，导致下划线飞走、弹窗飘顶、兄弟元素上移——这不是抖，是定位失控。
检查 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 - 父容器若尺寸不定，子元素
transform位移时仍可能引起周边“呼吸感”——给它加overflow: hidden或contain: layout
真正难的不是加 position: absolute，而是确保它锚定在正确的父容器上；也不是知道该用 transform，而是在 hover、@keyframes、JS 动态控制三类场景中统一用法、不混入任何 layout 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
