正确使用transform属性并保持函数顺序一致，才能实现旋转与缩放的平滑组合动画。1. 在transform中用空格分隔多个函数如rotate和scale；2. @keyframes各关键帧中需保持函数类型与顺序相同，避免插值错乱；3. 通过animation绑定动画，设置时长、缓动与循环等参数；4. 常用于按钮悬停或加载图标，注意使用forwards保留最终状态。
在CSS中实现旋转与缩放的组合动画，关键在于正确使用transform属性，并结合@keyframes定义动画帧。虽然transform支持多个函数叠加，但要让旋转、缩放同时平滑动画，必须将它们写在同一个transform声明中，否则可能只有一项生效。
1. 使用 transform 多函数组合
在transform中可以同时写多个变换函数，用空格分隔。例如：
.element {
transform: rotate(45deg) scale(1.2);
}
这种写法能同时应用旋转和缩放。但在动画中，起始状态和结束状态的函数顺序必须一致，否则会产生意外的中间态。
2. 在 @keyframes 中保持函数顺序一致
动画的关键是确保每个关键帧中transform函数的类型和顺序相同。比如：
立即学习“前端免费学习笔记（深入）”；
@keyframes spinAndGrow {
0% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(360deg) scale(1.5);
}
}
这样浏览器才能正确插值旋转角度和缩放比例。如果从scale() rotate()变成rotate() scale()，动画会错乱。
3. 应用动画并控制表现
将动画绑定到元素，并设置持续时间、缓动函数等：
.animated-element {
animation: spinAndGrow 2s ease-in-out infinite;
}
常用属性说明：
- 2s：动画持续2秒
- ease-in-out：先慢后快再慢
- infinite：循环播放
4. 实际应用场景建议
这类组合动画常用于按钮悬停、加载图标、交互反馈等。例如按钮放大并轻微旋转增强视觉吸引力：
.button:hover {
animation: slightRotateScale 0.3s forwards;
}
@keyframes slightRotateScale {
0% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(10deg) scale(1.1);
}
}
注意使用forwards让动画结束后保持最终状态。
基本上就这些。只要保证transform中函数顺序统一，就能顺利实现旋转与缩放的组合动画。不复杂但容易忽略细节。
