基于CSS实现6元素滑动文本动画：循环3次后停在最后元素

实现效果 #

6个文本元素按顺序上下滑动切换，完整循环3次后，停留在最后一个元素的显示状态，全程仅使用CSS实现。

完整代码 #

HTML

<h3>This<br>
  <div class="centered-container"> is   
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
    <span>five</span>
    <span>six</span>
  </div>
</h3>

CSS

/* 容器设置相对定位，确保绝对定位的子元素正确对齐 */
h3 > .centered-container {
  position: relative;
}

h3 > .centered-container span {
  animation: vertical 15s linear 3 forwards;
  -webkit-animation: vertical 15s linear 3 forwards;
  position: absolute;
  opacity: 0;
  left: 0; /* 统一所有文本的水平位置 */
}

/* 依次设置每个元素的动画延迟，实现顺序切换 */
h3 > .centered-container span:nth-child(2) {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
h3 > .centered-container span:nth-child(3) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
h3 > .centered-container span:nth-child(4) {
  -webkit-animation-delay: 7.5s;
  animation-delay: 7.5s;
}
h3 > .centered-container span:nth-child(5) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}
h3 > .centered-container span:nth-child(6) {
  /* 基础动画：3次完整循环，延迟12.5s启动；叠加保持显示的动画 */
  -webkit-animation: vertical 15s linear 12.5s forwards 3, vertical-last 20000s 45s 1;
  animation: vertical 15s linear 12.5s forwards 3, vertical-last 20000s 45s 1;
}

/* 核心滑动动画：控制元素的淡入淡出和位移 */
@keyframes vertical {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  2% {
    opacity: 0;
    transform: translateY(-5px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  40% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes vertical {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5px);
  }
  2% {
    opacity: 0;
    -webkit-transform: translateY(-5px);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateY(5px);
  }
  100% {
    opacity: 0;
  }
}

/* 最后元素保持显示的动画 */
@keyframes vertical-last {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes vertical-last {
  0%, 100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

关键调整说明 #

1. 动画时长计算：6个元素单次完整循环时长为2.5s × 6 = 15s，循环3次总时长为15s × 3 = 45s，确保所有元素完成3轮切换。
2. 延迟设置：每个元素的动画延迟依次递增2.5s，保证文本按顺序切换显示。
3. 最后元素处理：通过叠加vertical-last动画，在3次循环结束（45s后）启动，持续20000s（足够长的时间），让最后一个元素保持可见状态。
4. 布局修正：给.centered-container添加position: relative，并给所有span设置left: 0，确保绝对定位的文本元素在容器内正确对齐。
5. 浏览器兼容：补充-webkit-前缀，兼容老版本Chrome、Safari等浏览器。

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