如何用CSS动画实现按钮图标旋转和缩放效果？transform、rotate、scale与@keyframes结合详解

在网页交互中，按钮图标常常需要通过旋转和缩放来提示用户当前状态，比如加载中或刷新操作。使用CSS的transform配合rotate与scale，并结合@keyframes定义关键帧，可以纯样式实现这类动画，无需脚本参与。

一、核心属性说明

实现该效果主要依赖以下几个CSS能力：

• transform：用于对元素进行旋转、缩放、位移等变形处理。
• rotate()：让元素按指定角度旋转，单位为deg。
• scale()：让元素按比例放大或缩小，1为原始大小。
• @keyframes：定义动画在不同阶段的状态。

二、基础实现方式

我们可以给按钮里的图标定义一个动画，在动画过程中同时改变旋转角度和缩放值。

/* 定义旋转加缩放的关键帧 */
@keyframes icon-spin-scale {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.3);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 按钮图标基础样式 */
.btn-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #409eff;
  border-radius: 50%;
}

/* 悬停时触发动画 */
.btn:hover .btn-icon {
  animation: icon-spin-scale 1s ease-in-out infinite;
}

三、HTML结构示例

对应的页面结构非常简单，只需要一个按钮包裹图标元素：

<button class="btn">
  <span class="btn-icon"></span>
  刷新
</button>

四、控制动画细节

如果只希望点击时播放一次，可以去掉infinite并设置animation-fill-mode：

.btn:active .btn-icon {
  animation: icon-spin-scale 0.6s ease-out 1 forwards;
}

五、注意事项

使用transform做动画时，建议只动画transform和opacity，这样能利用GPU加速，避免页面卡顿。另外，在旧版浏览器中可能需要添加-webkit-前缀，但现代环境通常已不需要。

总结：通过@keyframes把rotate和scale组合进同一transform声明，就能让按钮图标平滑地旋转并缩放，写法清晰且性能良好。

CSS动画transform@keyframes修改时间：2026-07-31 06:03:17