必须将 rotate() 和 scale() 写在同一 transform 声明中，因为 transform 是复合属性而非叠加型，后写会覆盖前写；各关键帧需保持函数类型、顺序、单位（如 rotate(360deg)）及完整性（含 scale(1)、rotate(0deg)），且 transform-origin 必须全程一致。
必须把 rotate() 和 scale() 写在同一个 transform 声明里，否则后写的会直接覆盖前写的，动画就只剩一个效果。
为什么关键帧里写两个 transform 会失效
CSS 的 transform 是复合属性，不是叠加型。你在 0% 关键帧写了 transform: rotate(0deg)，又在 50% 关键帧单独写 transform: scale(1.2)，浏览器根本不会“记住”前面的旋转，它只认当前这行声明——结果就是该帧只有缩放，旋转归零。
- 错误写法：
0% { transform: rotate(0deg); }<br>50% { transform: scale(1.2); }<br>100% { transform: rotate(360deg); } - 正确写法：每个关键帧都显式写出全部变换函数，例如
transform: rotate(180deg) scale(1.2) - 顺序影响视觉结果：
rotate(45deg) scale(1.5)和scale(1.5) rotate(45deg)不一样——前者绕原始中心旋转后再放大，后者先放大再绕更大包围盒的中心转
@keyframes 里怎么写才能同步动起来
起始、中间、结束帧的 transform 必须保持函数类型和顺序完全一致，否则插值会跳变或失真。
- 所有帧都要包含
rotate()和scale()，哪怕数值没变（比如scale(1)、rotate(0deg)） - 单位不能省：
rotate(360)无效，必须是rotate(360deg)；scale()无单位，但支持双参数如scale(1.2, 0.8) - 示例：
@keyframes spin-zoom {<br> 0% { transform: rotate(0deg) scale(1); }<br> 50% { transform: rotate(180deg) scale(1.3); }<br> 100% { transform: rotate(360deg) scale(1); }<br>}
transform-origin 不一致会导致“错位”感
缩放会改变元素尺寸，如果旋转锚点没对齐缩放中心，看起来就像旋转轴在飘。默认 transform-origin: 50% 50% 是安全起点，但一旦改了就必须全程固定。
立即学习“前端免费学习笔记（深入）”；
- 不要在关键帧里动态改
transform-origin，它不支持平滑动画，多数浏览器会突变 - 想绕左上角转+缩放？统一设
transform-origin: 0 0，并在所有关键帧和元素上保持 - 百分比值（如
25% 75%）比像素更适配响应式布局 - 配合
will-change: transform可提前触发 GPU 加速，尤其当父容器有overflow: hidden且缩放后溢出时，能避免意外回退到 CPU 渲染
最容易被忽略的是：每个关键帧的函数顺序和完整性。少写一个 scale(1) 或漏掉单位，动画就可能从中间突然重置——这不是浏览器 bug，是 CSS 规范本身的要求。
