如何实现CSS图标360度往复旋转？单向旋转代码需优化

我来帮你搞定这个往复旋转的动画需求！你不需要分开维护两个独立的关键帧，只需要在一个@keyframes里定义完整的循环动作就能实现先顺时针转360°、再逆时针转360°的效果，逻辑更清晰也更容易控制。

问题分析 #

你原来的代码是让图标单向无限旋转，尝试添加反向关键帧但没生效，核心原因是没有把两个方向的动作整合到同一个动画周期里，浏览器不知道何时切换到反向动画。

解决方案代码 #

/* 兼容标准浏览器和旧版webkit内核浏览器 */
#loading {
  animation: rotationCycle 4s infinite linear;
  -webkit-animation: rotationCycle 4s infinite linear;
}

@keyframes rotationCycle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotationCycle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

<i id="loading" class="material-icons">autorenew</i>

代码说明 #

• 动画周期拆分：把总时长设为4秒（和你原来单向旋转2秒的节奏匹配，往复一次刚好4秒），0%到50%完成顺时针360°旋转，50%到100%完成逆时针360°旋转（从360°转回0°）。
• 无限循环：通过infinite属性让动画持续往复执行。
• 兼容性：同时保留标准写法和-webkit-前缀，确保在旧版Chrome、Safari等浏览器也能正常工作。

自定义调整小技巧 #

• 如果想改变每个方向旋转的速度，只需要修改@keyframes里的百分比节点，比如想让顺时针转3秒、逆时针转1秒，就把50%改成75%，100%保持100%，同时把总时长设为4秒即可。
• 要是觉得旋转不够顺滑，可以把linear换成ease-in-out这类缓动函数，不过线性动画更适合加载图标的场景。

你原来的尝试代码：

#loading { -webkit-animation: rotation 2s infinite linear; }
@-webkit-keyframes rotation {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(359deg); }
}

@-webkit-keyframes rotationBackwards {
  from { -webkit-transform: rotate(359deg); }
  to { -webkit-transform: rotate(0deg); }
}

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