多关键帧循环加载动画求助：仅首个箭头动画生效问题

纯CSS实现方案（无需JavaScript） #

因为你不擅长脚本开发，优先用纯CSS就能实现需求，核心是利用animation-delay让箭头依次启动动画，再通过完整的@keyframes包含滑入、停留、滑出、复位的全流程，实现循环效果。

HTML结构

<div class="loader-container">
  <span class="arrow arrow-1">→</span>
  <span class="arrow arrow-2">→</span>
  <span class="arrow arrow-3">→</span>
</div>

CSS代码

/* 容器样式，按需调整 */
.loader-container {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
}

/* 箭头基础样式 */
.arrow {
  font-size: 28px;
  opacity: 0;
  transform: translateX(-100%);
  /* 定义动画：名称、总时长、循环、缓动效果 */
  animation: slideLoop 6s infinite ease-in-out;
}

/* 给每个箭头设置延迟，实现顺序启动 */
.arrow-1 { animation-delay: 0s; }
.arrow-2 { animation-delay: 1s; }
.arrow-3 { animation-delay: 2s; }

/* 完整的滑入-停留-滑出-复位动画 */
@keyframes slideLoop {
  /* 初始状态：隐藏在左侧 */
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  /* 滑入完成：显示在原位 */
  16.66% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 停留阶段：保持可见 */
  33.33% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 滑出开始前：仍保持可见 */
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 滑出完成：隐藏在右侧 */
  66.66% {
    transform: translateX(100%);
    opacity: 0;
  }
  /* 复位阶段：回到左侧初始位置 */
  83.33%, 100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

方案说明 #

1. 顺序滑入：通过animation-delay给每个箭头设置1秒的延迟差，让箭头1先启动，1秒后箭头2启动，再1秒后箭头3启动，实现1→2→3的滑入顺序。
2. 反向滑出：因为动画总时长6秒，每个箭头的滑出阶段在动画后半段，延迟差会让箭头3先进入滑出阶段，接着是箭头2，最后是箭头1，刚好对应3→2→1的滑出顺序。
3. 循环效果：animation-iteration-count: infinite让动画无限循环，复位阶段确保箭头回到初始位置，为下一轮动画做准备。

为什么之前只有首个箭头生效？ #

大概率是你只给第一个箭头添加了动画属性，没有为另外两个箭头设置animation和对应的animation-delay，导致它们没有触发动画。

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