如何实现SVG六边形旋转动画循环后自动切换方向？

你可以通过两种简单方式实现需求，以下是具体调整方案：

方法一：利用animation-direction: alternate（推荐） #

这是最简洁的实现方式，无需修改关键帧，仅调整SVG的动画属性即可：

修改后的CSS代码：

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

svg {
  animation: rotation 5s linear infinite alternate;
}

• alternate属性会让动画在奇数次循环时按正方向播放（0°→360°），偶数次循环时反向播放（360°→0°），刚好满足每次循环后切换旋转方向的要求。
• 保留linear属性确保旋转速度始终均匀，避免出现加速或减速的突兀感。

方法二：自定义双向旋转关键帧 #

如果你需要更直观地控制动画流程，可以修改关键帧，让单个动画周期包含正转和反转两个阶段：

修改后的CSS代码：

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

svg {
  animation: rotation 10s linear infinite;
}

• 这里将动画时长调整为10秒，保证正转和反转各占5秒，和原方案的单方向旋转速度保持一致。
• 关键帧先完成0°→360°的正转，再回到0°完成反转，循环播放后就会呈现正转、反转交替的效果。

两种方法都能实现目标效果，第一种更简洁高效，第二种适合需要精细控制动画阶段的场景。

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