如何实现图标按1→2→3→2→1无限循环的淡入淡出动画？

要实现你需要的**1→2→3→2→1→2→3→2→1…**无限循环切换序列，需要调整动画关键帧、时长逻辑，具体修改如下：

修改后的完整代码 #

.fader .icon {
  animation-iteration-count: infinite;
  animation-duration: 8s; /* 8秒覆盖完整的1→2→3→2→1→2→3→2周期 */
  animation-timing-function: steps(1, end); /* 实现图标瞬间切换，如需渐变可移除 */
}

/* 为每个图标单独定义显示时段 */
#icon1 {
  animation-name: fade-1;
}

#icon2 {
  animation-name: fade-2;
}

#icon3 {
  animation-name: fade-3;
}

@keyframes fade-1 {
  /* 0-1秒、4-5秒显示 */
  0%, 50% { opacity: 1; }
  12.5%, 25%, 37.5%, 62.5%, 75%, 87.5%, 100% { opacity: 0; }
}

@keyframes fade-2 {
  /* 1-2秒、3-4秒、5-6秒、7-8秒显示 */
  12.5%, 37.5%, 62.5%, 87.5% { opacity: 1; }
  0%, 25%, 50%, 75%, 100% { opacity: 0; }
}

@keyframes fade-3 {
  /* 2-3秒、6-7秒显示 */
  25%, 75% { opacity: 1; }
  0%, 12.5%, 37.5%, 50%, 62.5%, 87.5%, 100% { opacity: 0; }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css"  />

<div class="fader mt-3 ms-3">
  <div class="position-relative">
    <span id="icon3" class="icon bi bi-3-square fs-1 position-absolute top-0 start-0"></span>
    <span id="icon2" class="icon bi bi-2-square fs-1 position-absolute top-0 start-0"></span>
    <span id="icon1" class="icon bi bi-1-square fs-1 position-absolute top-0 start-0"></span>
  </div>
</div>

核心修改说明 #

1. 拆分关键帧：为每个图标单独定义@keyframes，精准控制每个图标的显示时段，确保同一时间只有一个图标可见，避免重叠。
2. 匹配序列时长：设置动画时长为8秒，刚好覆盖1→2→3→2→1→2→3→2的完整序列，循环后自然衔接成你需要的无限序列。
3. 切换效果控制：使用steps(1, end)实现图标瞬间切换；如果需要平滑淡入淡出效果，直接移除该属性即可。
4. 移除冗余延迟：通过关键帧直接控制显示时段，无需依赖animation-delay，逻辑更清晰易维护。

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