CSS中animation可结合transform的scale和rotate实现流畅动画，需在@keyframes中合并书写transform函数避免覆盖，如transform: scale(1.2) rotate(45deg)；执行顺序从右到左，影响视觉效果，可通过transform-origin调整旋转中心；配合transition、will-change等优化性能，适用于按钮悬停、图标加载等交互场景。
在CSS中，animation 可以与 transform 属性中的 scale 和 rotate 结合使用，实现丰富且流畅的动画效果。通过合理组合缩放（scale）和旋转（rotate），可以让元素产生更具视觉冲击力的动态表现，比如按钮悬停、图标加载、卡片翻转等。
基础语法与组合方式
要实现 scale 与 rotate 的组合动画，需在 @keyframes 中定义 transform 属性的变化过程。注意：多个 transform 函数应写在同一 transform 值中，否则会相互覆盖。
错误写法：
transform: scale(1.2);
transform: rotate(45deg);
→ 后面的 rotate 会覆盖前面的 scale。
正确写法：
transform: scale(1.2) rotate(45deg);
→ 多个变换合并书写，顺序影响最终效果。
常见动画场景示例
以下是一个结合 scale 和 rotate 的悬停动画，常用于按钮或图标交互：
<style>
.icon {
display: inline-block;
width: 50px;
height: 50px;
background: #007bff;
border-radius: 8px;
margin: 20px;
cursor: pointer;
<p>transition: transform 0.3s ease;
}</p><p>.icon:hover {
animation: growRotate 0.6s ease-in-out forwards;
}</p><p>@keyframes growRotate {
0% {
transform: scale(1) rotate(0);
}
50% {
transform: scale(1.3) rotate(10deg);
}
100% {
transform: scale(1.2) rotate(20deg);
}
}</p></style>这个动画在鼠标悬停时，先放大并轻微旋转，再继续旋转增强动感，同时略微回调缩放，使视觉更自然。
立即学习“前端免费学习笔记（深入）”；
变换顺序的影响
transform 函数的执行顺序是从右到左。例如：
-
transform: scale(1.5) rotate(45deg)→ 先旋转，再缩放 -
transform: rotate(45deg) scale(1.5)→ 先缩放，再旋转
虽然多数情况下差异不大，但在非中心锚点或复杂布局中可能影响视觉表现。可通过 transform-origin 调整旋转中心点：
.icon {
transform-origin: center bottom; /* 从底部中心旋转 */
}
性能与优化建议
- 使用 transform 和 opacity 触发动画，浏览器会启用 GPU 加速，性能更好
- 避免在动画中修改 width、height、margin 等触发重排的属性
- 添加 will-change: transform 可提前告知浏览器该元素将动画
- 对于简单状态切换，可优先用 transition；复杂流程才用 animation
基本上就这些。只要掌握 transform 的合并写法和执行顺序，就能灵活组合 scale 与 rotate 实现各种生动的动画效果。不复杂但容易忽略细节。
