会覆盖；CSS transform是复合属性，同一声明中多次设置会完全替换而非叠加，需在每个关键帧中显式合并所有变换函数并保持顺序一致。
关键帧里写多个transform函数会覆盖吗
会。CSS 的 transform 是一个复合属性，同一声明中多次写 transform（比如在不同关键帧里分别只写 rotate() 或 scale()），后写的会完全替换前写的，而不是叠加。浏览器不会自动合并旋转和缩放，它只认最终那条 transform: ... 声明。
正确写法：所有变换必须合并到单个transform值里
要在同一时刻实现旋转+缩放同步动画，每个关键帧的 transform 必须显式包含全部需要的函数，并按期望顺序拼接。顺序很重要：transform 函数从左到右执行，所以 scale(1.2) rotate(45deg) 和 rotate(45deg) scale(1.2) 视觉效果不同（缩放中心、旋转轴心会变）。
- 推荐统一用
rotate()在前、scale()在后，避免因缩放改变元素尺寸后影响旋转锚点 - 数值尽量用变量或 calc() 保持可维护性，例如：
transform: rotate(var(--rot)) scale(var(--scale)); - 起始/结束关键帧都要写全，不能某帧漏掉
scale或rotate，否则该帧会回退到未声明值（相当于scale(1) rotate(0)）
@keyframes spin-zoom {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.3);
}
100% {
transform: rotate(360deg) scale(1);
}
}
用transform-origin控制旋转缩放的共同支点
默认 transform-origin 是 50% 50%（中心），但如果你发现旋转和缩放看起来“错位”，大概率是缩放改变了元素包围盒，而旋转仍以原始中心为轴——这时必须显式设置 transform-origin，且在动画全程保持一致。
- 不要在关键帧里动态改
transform-origin，它不支持动画（部分浏览器会跳变） - 如果要绕左上角旋转并缩放，统一设为
transform-origin: 0 0; - 百分比值（如
25% 75%）比像素更安全，适配响应式布局
性能敏感时优先用will-change和GPU加速
纯 transform 动画本就走合成层，但若动画卡顿或有闪烁，检查是否意外触发重排重绘。常见陷阱：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
overflow: hidden且子元素缩放后溢出，可能强制 CPU 渲染 - 没加
will-change: transform;，尤其在低功耗设备上，动画起始帧可能延迟一帧 - 避免在动画中同时修改
width/height或top/left，这会让浏览器放弃 GPU 加速
真正难调的不是语法，而是 origin 定义是否和设计预期一致，以及 scale 值是否在缩放过程中无意改变了旋转参考系——这两处不动手试几次根本看不出问题。
