缩放和旋转动画冲突的本质是transform属性后声明覆盖前声明，浏览器不叠加而整体替换；必须将scale与rotate合并至同一transform值中，通过多关键帧精细控制节奏，并显式设置transform-origin以避免偏移。
缩放和旋转动画冲突，本质是 transform 属性的多次声明覆盖问题。CSS 中同一个属性在同一条规则里后写的会覆盖前写的；而多个动画分别设置 scale 和 rotate，若没合并到同一个 transform 值里，浏览器无法自动叠加，导致其中一个失效或表现异常。
必须把所有 transform 变换写进同一个 transform 声明中
浏览器对 transform 的解析是“整体替换”，不是“增量叠加”。即使两个动画同时作用于同一元素，如果它们各自独立设置 transform: scale(...) 和 transform: rotate(...)，后者会完全取代前者。
- ❌ 错误写法（两个动画分开定义 transform）：
@keyframes zoom { to { transform: scale(1.2); } }
@keyframes spin { to { transform: rotate(360deg); } }
.element { animation: zoom 1s, spin 1s; }
→ 实际只生效最后一个动画的 transform 值，另一个被丢弃。
- ✅ 正确写法（单个 keyframes 内组合写）：
@keyframes zoomAndSpin {
to { transform: scale(1.2) rotate(360deg); }
}
.element { animation: zoomAndSpin 1s; }
需要分别控制节奏？用 calc 或分段关键帧模拟
如果缩放和旋转要不同持续时间、缓动或方向（比如缩放快+旋转慢），不能拆成两个动画，但可以靠关键帧内部精细控制：
立即学习“前端免费学习笔记（深入）”；
- 用
0%, 50%, 100%等多档关键帧，让 scale 和 rotate 按需变化 - 例如：前半程放大 + 后半程旋转，或缩放线性、旋转加速度变化
- 避免依赖 JS 计算，纯 CSS 关键帧内用数值明确写出每个时刻的完整 transform
@keyframes complexMotion {
0% { transform: scale(1) rotate(0deg); }
40% { transform: scale(1.3) rotate(0deg); }
100% { transform: scale(1.3) rotate(720deg); }
}
注意 transform-origin 会影响最终效果
缩放和旋转共用时，锚点（transform-origin）位置很关键。默认是 50% 50%（中心），但如果想绕左上角旋转同时从该点放大，需统一设置：
- 在动画元素上显式声明
transform-origin: top left; - 或在 keyframes 里每一帧都带上（尤其当 origin 也要动画时）
- 不写则以元素默认 origin 为准，但多个动画混用时建议显式固定，避免意外偏移
慎用 animation-fill-mode: forwards 配合多动画
如果曾尝试用两个带 forwards 的动画实现“保留缩放+保留旋转”，依然会失败——因为最终 computed style 只保留最后一个动画结束时的 transform 值。
- 解决方案仍是：用一个动画，在
100%帧里写出你想要的最终transform组合值 - 如需中途暂停某部分效果，改用
animation-play-state或切换 class 控制单个动画启停
