正确做法是将旋转和缩放写在同一个transform中，避免属性覆盖导致动画异常。例如使用@keyframes定义动画：0% { transform: rotate(0) scale(1); } 100% { transform: rotate(360deg) scale(1.5); }，并应用到元素。同时注意设置正确的transform-origin、避免样式冲突、使用will-change提升性能，确保动画流畅自然。
在使用CSS实现元素的旋转和缩放同时动画时，如果发现动画效果异常，比如变形失真、中心点偏移或动画卡顿，通常是因为多个transform属性被单独设置导致覆盖或重置。正确做法是将旋转（rotate）和缩放（scale）统一写在同一个transform函数中，并配合@keyframes进行组合动画。
问题原因：transform 属性被覆盖
当你这样写：
transform: rotate(45deg);transform: scale(1.2);
后面的scale会完全覆盖前面的rotate，最终只有缩放生效。这就是动画“异常”的根本原因——多个transform声明无法叠加。
解决方案：使用组合 transform 值
把所有变换写在一个transform里，确保它们共同作用：
立即学习“前端免费学习笔记（深入）”；
transform: rotate(45deg) scale(1.2);在@keyframes中也保持这一原则：
@keyframes spinAndGrow {
0% {
transform: rotate(0) scale(1);
}
100% {
transform: rotate(360deg) scale(1.5);
}
}
然后应用到元素：
.box {
animation: spinAndGrow 2s ease-in-out infinite;
}
注意关键细节
为了动画更自然，注意以下几点：
- 确保
transform-origin设置正确，默认是元素中心，如需改变可设为top left等 - 避免在动画过程中动态添加/移除其他transform样式，防止冲突
- 使用
will-change: transform提升性能，尤其在频繁动画时 - 测试不同浏览器下的表现，特别是老版本移动端
基本上就这些。只要把 rotate 和 scale 写进同一个 transform，并用 keyframes 控制全过程，就能避免动画异常。不复杂但容易忽略。
