抖动源于rotate和scale在不同keyframes中独立定义导致插值异常；须统一写在同一transform声明中并全程共用同一组keyframes，起始/结束状态需显式写出全部函数（如rotate(0deg) scale(1)），避免浏览器隐式补值引发跳变。
抖动通常是因为旋转（rotate）和缩放（scale）在不同 keyframes 中独立定义，导致浏览器在插值计算时因 transform 合成顺序或数值精度问题产生视觉跳变。解决核心是：**所有 transform 变换必须统一写在同一个 transform 声明中，并全程使用同一组 keyframes 控制**。
✅ 正确写法：单个 transform 属性 + 统一 keyframes
不要分开写 rotate() 和 scale() 在不同动画里，也不要拆成多个 transform 属性（CSS 不支持）。必须合并为一个字符串，例如：
-
✓ 正确：
transform: rotate(45deg) scale(1.2); -
✗ 错误：
transform: rotate(45deg);+ 另一个动画改transform: scale(1.2); -
✗ 错误：用两个
@keyframes分别控制 rotate 和 scale，再同时应用到元素上
✅ 关键细节：起始/结束状态必须显式一致
即使只动旋转或只动缩放，也要在每个关键帧中完整写出全部 transform 函数，未变化的值不能省略（尤其是 scale(1) 或 rotate(0)），否则浏览器会从默认值（如 scale(1) rotate(0)）开始插值，容易引发意外重置和抖动：
-
✓ 推荐写法（显式、可控）：
@keyframes spinZoom {
0% { transform: rotate(0deg) scale(1); }
100% { transform: rotate(360deg) scale(1.3); }
} -
✗ 避免写法（隐式、风险高）：
0% { transform: rotate(0deg); }← 缺少 rotate，浏览器可能补 0 或丢弃，导致中间帧错乱
100% { transform: scale(1.3); }
✅ 进阶建议：启用 will-change 和硬件加速
对频繁变换的元素，加一行可显著提升渲染稳定性：
立即学习“前端免费学习笔记（深入）”；
-
will-change: transform;（仅在动画前临时设置，动画结束可移除） - 确保 transform 不触发 layout（避免同时改 width/height/margin 等）
- 可追加
transform: translateZ(0);或backface-visibility: hidden;强制 GPU 加速（尤其在 Safari 中更有效）
✅ 调试小技巧：用 devtools 检查 computed transform
打开浏览器开发者工具 → Elements → Styles → 找到 computed 的 transform 值，播放动画时观察中间帧是否平滑过渡。如果看到类似 matrix(…) 突然跳变或 NaN，说明 keyframes 定义有逻辑断层（比如某帧漏写了 scale）。
