真正稳定的 CSS 动画只能用 transform 和 opacity，因二者不触发重排重绘；left/top/width 等属性会强制重排，margin、border 等过渡也会拖累性能；关键帧需完整声明所有 transform 函数，避免插值错乱。
CSS 动画抖动不是“浏览器抽风”，而是浏览器在帧与帧之间反复重排（reflow）或重绘（repaint）导致的视觉跳变——根本原因是动画属性踩进了布局计算的雷区。
为什么 left、top、width 一动就抖
这些属性直接影响元素在文档流中的几何位置和尺寸，每次动画帧都要重新计算整个布局树，波及父级、兄弟元素，甚至触发整行文本重排。尤其在中低端设备或复杂 DOM 下，帧率掉到 40fps 以下，抖动肉眼可见。
-
left: 100px→ 强制重排；transform: translateX(100px)→ 只走 GPU 合成层，不碰布局 - 哪怕只在某一个关键帧里写了
margin-top: 2px，整条动画链都会退回低效路径 - 用
transition: all 0.3s是抖动高发配置——它会偷偷给border、padding等也加过渡
旋转 + 缩放一起动，为什么画面突然“卡一下”
不是 rotate 和 scale 本身有问题，而是浏览器对多个 transform 函数插值时，若关键帧间缺失显式声明，就会从默认值（rotate(0)、scale(1)）开始补值，造成中间帧错乱或矩阵突变。
- ❌ 错误：一个
@keyframes控 rotate，另一个控 scale；或0%写transform: rotate(0deg)，100%只写transform: scale(1.3) - ✅ 正确：所有帧都完整写出全部函数，例如
transform: rotate(0deg) scale(1)→transform: rotate(360deg) scale(1.3) - 加
will-change: transform有帮助，但必须在动画前设置、结束后移除，否则 Chrome 98+ 会警告且可能更慢
伪元素（::after）、固定定位（position: fixed）、浮动元素为什么特别容易抖
它们各自触发了不同的渲染陷阱：
立即学习“前端免费学习笔记（深入）”；
-
::after抖动常因content动态变化或width/height过渡引起重排；应始终用transform: scaleX()替代width，并确保父元素有position: relative -
position: fixed混合top: 50%; transform: translateY(-50%)会导致亚像素渲染偏差；改用 Flex/Grid 居中，或至少保证translateY()的值是整数像素（如translateY(-100px)，而非translateY(-99.7px)） - 浮动元素动画必抖——
float本身就是重排触发器；动画前先用position: absolute脱离文档流，或直接重构为display: flex
text、height、逐帧动画抖动：那些被忽略的“小数”问题
抖动不总来自大动作，有时只是浏览器在像素取整时的微小分歧：
-
line-height: 1.3配font-size: 15px→ 实际行高 19.5px，动画中每帧取整方式不同，文本行上下跳 - 解决方案：用整数
line-height（如line-height: 1.2→ 18px），或改用steps(20)让高度过渡变成离散步进 - 逐帧动画（如 sprite sheet）抖动，多因背景图在非整数分辨率下缩放失真；iPhone 6 不抖只是因为设计稿按它适配，其它机型没对齐；应确保
background-size和容器宽高均为整数像素，或改用 SVG Sprite
真正稳定的 CSS 动画，往往不是靠堆参数调出来的，而是从第一行样式就避开文档流变更——transform 和 opacity 是仅有的两个“安全出口”，其余都是潜在抖动源。
