如何用CSS实现未知数量单词的循环轮播动画？

你的判断不完全正确——仅用CSS就能实现这个需求，核心是通过拆分动画阶段为独立的滑入、停留、滑出动画，结合自定义变量控制各阶段的延迟和总时长，避免依赖固定百分比的关键帧。

原代码的问题分析 #

你遇到的核心问题是：

• 固定百分比的关键帧无法适配变化的总动画时长，导致滑入/停留/滑出的时间比例失效
• 单一动画的无限循环会导致元素重复出现时重叠

修正后的实现方案 #

下面的代码支持任意数量的单词，每个元素严格遵循1秒滑入、3秒停留、1秒滑出的节奏，整体轮播完所有元素后重复循环，总周期为单词数量 × 5秒：

HTML 结构

<p class="rotator" style="--count: 6;">
  <span class="rotator__item" style="--i: 0">awesome</span>
  <span class="rotator__item" style="--i: 1">amazing</span>
  <span class="rotator__item" style="--i: 2">legendary</span>
  <span class="rotator__item" style="--i: 3">super duper</span>
  <span class="rotator__item" style="--i: 4">fantastic</span>
  <span class="rotator__item" style="--i: 5">fun</span>
</p>

<p class="rotator" style="--count: 3;">
  <span class="rotator__item" style="--i: 0">awesome</span>
  <span class="rotator__item" style="--i: 1">amazing</span>
  <span class="rotator__item" style="--i: 2">legendary</span>
</p>

CSS 代码

.rotator {
  --item-cycle: 5s; /* 单个元素的完整动画周期 */
  --total-duration: calc(var(--count) * var(--item-cycle));
  white-space: nowrap;
  position: relative;
  height: 100px;
}

.rotator__item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-50%);
  /* 将动画拆分为三个独立阶段：滑入、停留、滑出 */
  animation: 
    slide-in 1s forwards,
    stay 3s forwards,
    slide-out 1s forwards;
  /* 所有动画的总时长等于轮播的完整周期，确保循环同步 */
  animation-duration: var(--total-duration);
  animation-iteration-count: infinite;
  /* 为每个阶段设置精准的延迟时间 */
  animation-delay: 
    calc(var(--i) * var(--item-cycle)),
    calc(var(--i) * var(--item-cycle) + 1s),
    calc(var(--i) * var(--item-cycle) + 4s);
}

/* 滑入动画：从上方进入并显示 */
@keyframes slide-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 停留动画：保持显示状态 */
@keyframes stay {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 滑出动画：向下退出并隐藏 */
@keyframes slide-out {
  to {
    opacity: 0;
    transform: translateY(50%);
  }
}

实现原理 #

1. 拆分动画阶段：将完整的动画拆分为三个独立的关键帧动画，分别控制滑入、停留、滑出，每个阶段的时长固定为1s、3s、1s
2. 同步循环周期：所有动画的总时长设置为单词数量 × 5秒，确保整个轮播循环的同步性
3. 精准延迟控制：通过自定义变量--i（元素索引）和--item-cycle（单个元素周期），计算每个元素各动画阶段的延迟时间，保证元素依次有序播放
4. 状态保持：使用animation-fill-mode: forwards让每个动画阶段结束后保持最终状态，直到下一个阶段开始或循环重置

注意事项 #

• 需要确保每个元素的--i索引从0开始连续递增，--count值与实际单词数量一致
• 如果需要支持更旧的浏览器，可添加浏览器前缀（如-webkit-animation），但现代浏览器已无需额外处理

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