如何让无限循环的CSS动画执行后不返回初始状态？

看起来你想要的是那种动画每次循环结束后停在当前状态，下一轮直接从该状态继续推进的效果——就像太阳持续向一个方向移动，不会在循环结束后跳回起点，对吧？

先聊聊你提供的示例代码里需要调整的点：你用了animation-direction: alternate，这个属性会让动画在奇数次正向播放、偶数次反向播放，这会导致动画来回“晃”，完全不符合“不返回初始状态”的需求；另外animation-fill-mode: forwards在无限循环场景下作用不大，因为动画会一直重复执行。

下面给你两种可行的解决方案，分别适用于不同场景：

方案1：JS+CSS结合（精准实现累积式移动，完美模拟太阳移动） #

这个方案能让动画真正做到每次循环都在上一次结束的位置继续推进，不会有任何回溯或跳跃。核心思路是让动画只播放一次，结束后把元素的当前状态设为新的初始状态，再重新触发动画。

<!-- 示例元素 -->
<div class="sun"></div>

<style>
.sun {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffa500;
  position: absolute;
  top: 20%;
  left: 0;
  /* 动画只播放一次，结束后停在最后一帧 */
  animation: moveSun 10s forwards;
}

/* 定义单次移动的关键帧：从左到右穿越视口 */
@keyframes moveSun {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw - 50px));
  }
}
</style>

<script>
const sunElement = document.querySelector('.sun');

// 监听动画结束事件
sunElement.addEventListener('animationend', () => {
  // 获取元素当前的位置状态
  const currentTransform = getComputedStyle(sunElement).transform;
  // 把当前状态设为元素的固定样式（避免动画重置后跳回起点）
  sunElement.style.transform = currentTransform;
  
  // 重置动画触发逻辑：先移除动画，再重新添加（触发浏览器重绘）
  sunElement.style.animation = 'none';
  setTimeout(() => {
    sunElement.style.animation = 'moveSun 10s forwards';
  }, 10);
});
</script>

这个方案的优势是完全符合你的需求：每次动画结束后，太阳会停在当前位置，下一轮直接从该位置继续向右移动，永远不会回到初始的左侧位置。

方案2：纯CSS实现（适合无缝循环的动画，比如旋转、背景滚动） #

如果你的动画是旋转、颜色渐变、无缝背景滚动这类可以让起始/结束状态视觉上完全衔接的效果，纯CSS就能搞定，不需要JS。

比如一个持续旋转的“太阳”动画（不会回到初始角度，视觉上一直转）：

.animator3 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffa500;
  /* 核心配置：正向无限循环，线性速度保证匀速旋转 */
  -webkit-animation-name: j3;
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: normal; /* 去掉alternate，保持正向播放 */
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear; /* 匀速动画，避免卡顿感 */
}

@-webkit-keyframes j3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); /* 旋转一圈，和起始角度完全衔接，视觉上无断点 */
  }
}

这种方式的关键是让关键帧的100%状态和0%状态在视觉上完全一致，这样无限循环时就不会有“跳回初始状态”的感觉，看起来像是持续推进的。

总结一下 #

• 如果你需要真正的位置累积移动（比如太阳持续向一个方向走，绝不回头）：用方案1的JS+CSS组合。
• 如果你做的是旋转、渐变这类无缝循环动画：用方案2的纯CSS写法更简单。

内容的提问来源于stack exchange，提问作者Umutcan Bahadır