缩放与旋转无法同时播放是因多个transform被覆盖，需将scale和rotate写入同一animation的transform中，如：transform: scale(1) rotate(0deg)；或通过父子元素分离实现独立动画控制。
在使用 CSS 实现元素动画时，如果发现缩放（scale）和旋转（rotate）无法同时正常播放，通常是因为多个 transform 动画被单独定义在不同的 keyframes 中，导致后定义的覆盖了前面的效果。解决这个问题的关键是：将 scale 和 rotate 写在同一个 transform 属性中，通过一个统一的 animation 来控制。
问题原因：transform 被覆盖
当你为同一个元素分别设置两个动画，比如一个控制缩放，一个控制旋转，而它们都修改 transform 属性时，浏览器只会应用最后执行的那个 transform 值，造成“只有一个动画生效”的错觉。
❌ 错误写法示例：
@keyframes animate-scale {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
@keyframes animate-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.element {
animation: animate-scale 2s infinite, animate-rotate 2s infinite;
}上面代码中，两个动画都修改 transform，实际运行时只会保留其中一个效果。
立即学习“前端免费学习笔记（深入）”；
正确做法：合并 transform 到同一动画
把 scale 和 rotate 写进同一个 transform 函数中，确保它们共存。
✅ 正确写法示例：
@keyframes scale-and-rotate {
0% {
transform: scale(1) rotate(0deg);
}
50% {
transform: scale(1.2) rotate(180deg);
}
100% {
transform: scale(1) rotate(360deg);
}
}
.element {
animation: scale-and-rotate 2s ease-in-out infinite;
}这样，缩放和旋转会同步进行，不会互相干扰。
灵活控制：使用 transform 多函数组合
CSS 的 transform 支持在同一属性中叠加多个函数，顺序执行。你可以自由组合 scale、rotate、translate、skew 等。
- transform: scale(1.1) rotate(45deg) translateX(10px);
- 所有变换都会作用于元素，不会丢失任何一个效果
- 注意顺序会影响最终视觉结果（先缩放再旋转 vs 先旋转再缩放效果不同）
进阶技巧：用 animation-timing-function 分别控制节奏
如果你希望缩放和旋转有不同的缓动效果，可以借助伪元素或父子分离结构实现独立控制。
```css .parent { position: relative; animation: rotate-finely 2s infinite linear; }.child { animation: scale-pulse 2s infinite ease-in-out; }
@keyframes rotate-finely { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes scale-pulse { 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
<p>通过将旋转应用于父元素，缩放作用于子元素，实现视觉上的“同时播放”且互不干扰。</p> <p>基本上就这些。关键点是：不要让多个 animation 同时修改同一个 transform 属性。合并或分层处理，就能完美实现缩放与旋转的同时动画。
