如何实现图标在hover时持续旋转？当前图标hover旋转异常及修改后环绕问题求助

嘿，我来帮你搞定这个图标旋转的问题！你碰到的俩问题都是CSS动画里常见的小坑，咱们一步步来解决：

1. 解决“仅旋转3-4秒就停止”的问题 #

这个问题的核心是动画循环次数没设对。默认情况下，CSS动画只会执行1次，所以要让它持续转起来，你需要把animation-iteration-count设为infinite（无限循环）。

给你个基础的可运行示例：

/* 图标基础样式 */
.icon {
  width: 40px;
  height: 40px;
  /* 可选：给hover状态加个平滑过渡，避免突兀 */
  transition: all 0.3s ease;
}

/* Hover时触发旋转动画 */
.icon:hover {
  /* spin是动画名称，2s是转一圈的时间，linear保持匀速，infinite无限循环 */
  animation: spin 2s linear infinite;
}

/* 定义旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这里的linear很重要，能让旋转速度保持均匀，不会忽快忽慢；2s可以根据你的需求调整，比如改成1s就是每秒转一圈。

2. 解决“环绕旋转的异常情况” #

这个问题通常是旋转原点偏移或者transform属性冲突导致的，咱们逐个排查：

排查点1：确保旋转中心正确 #

默认的transform-origin是元素的中心（50% 50%），但如果你的图标有额外的定位、margin，或者父元素的布局影响，可能会导致旋转原点偏离中心，看起来像“环绕”。你可以显式指定旋转中心来修复：

.icon {
  /* 明确指定旋转中心为元素自身的中心 */
  transform-origin: center center;
  /* 也可以用具体像素值，比如图标是40x40的话，就是20px 20px */
}

排查点2：分离定位与旋转的transform属性 #

如果你的图标本身已经有其他transform属性（比如translate、scale），hover时的旋转动画会覆盖这些属性，导致图标位置偏移，看起来像环绕。解决方法是用嵌套容器分开处理：

<!-- 用容器负责定位，图标只负责旋转 -->
<div class="icon-wrapper">
  <i class="icon"></i>
</div>

.icon-wrapper {
  /* 把定位相关的transform放在容器上 */
  transform: translateX(20px) scale(1.2);
}

.icon:hover {
  /* 图标只执行旋转动画，不会影响定位 */
  animation: spin 2s linear infinite;
}

总结一下 #

• 要持续旋转：必须给动画加上infinite循环次数
• 避免环绕异常：检查transform-origin是否为元素中心，分离定位和旋转的transform操作

内容的提问来源于stack exchange，提问作者Varun Arora