必须将 rotate 和 scale 写在同一 transform 中用单个 @keyframes 控制，因 transform 是复合属性，分拆动画会覆盖导致不同步；函数顺序影响变换逻辑，推荐先 rotate 后 scale，并避免与 transition 混用。
当 CSS 元素同时做旋转（rotate）和缩放（scale）动画时，如果用多个独立的动画（比如分别给 transform: rotate() 和 transform: scale() 写不同 animation），浏览器会因 transform 覆盖导致行为不协调——后声明的动画会覆盖前一个，最终只执行最后一个 transform 值。
必须把 rotate 和 scale 写在同一个 transform 里
transform 是一个复合属性，不能像 color 或 opacity 那样分拆动画。每次设置 transform，都会完整替换整个变换矩阵。所以：
- ❌ 错误：分别写
animation: spin 2s, zoom 2s;并在 @keyframes 中各自只改 rotate 或 scale - ✅ 正确：只定义一个 animation，所有变换统一在同一个 @keyframes 中通过
transform: rotate(...) scale(...)组合写出
用单个 @keyframes 精确控制每帧的组合效果
例如实现「先放大再旋转」或「同步缩放+旋转」，关键是在每个 keyframe 里手动写出完整的 transform 值：
@keyframes spinAndGrow {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.3); }
100% { transform: rotate(360deg) scale(1); }
}
这样浏览器每一帧都计算一个完整的变换矩阵，旋转与缩放自然同步，不会错位或跳变。
立即学习“前端免费学习笔记（深入）”；
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
注意 transform 函数的顺序影响结果
transform 函数的书写顺序决定数学运算顺序（从右往左应用）。例如：
-
transform: scale(1.5) rotate(45deg);→ 先旋转，再缩放（缩放作用于已旋转的坐标系） -
transform: rotate(45deg) scale(1.5);→ 先缩放，再旋转（旋转中心被放大后偏移）
多数情况下推荐 先 rotate 后 scale，更符合直觉；若需绕原点稳定旋转，可加 transform-origin: center; 统一基准点。
避免用 transition 混搭 transform 动画
如果元素既有 hover 的 transition: transform 0.3s，又叠加了 animation，两者会竞争 transform 值，极易冲突。建议：
- 纯动画场景：只用
animation + @keyframes，禁用相关 transition - 交互触发动画：用 JS 切换 class 触发动画，而非依赖 transition 自动补间
- 需要过渡效果：把入场/退出逻辑也写进 keyframes（如 0%→10% 启动，90%→100% 收尾）
不复杂但容易忽略：transform 动画协调性的核心，就是“不拆、不混、不抢”——所有变换写一起，用一套 keyframes 控制，让浏览器算一次到位。
