CSS实现ul列表项逐一轮播动画时出现项重叠问题如何解决

问题原因 #

你当前的代码出现重叠主要有两个核心问题：

• 使用了animation-direction: alternate参数，动画正向播放完成后会反向回放，等于单个元素的完整显隐周期翻倍，和你设置的4个元素的错开延迟完全不匹配
• 单元素动画时长、延迟间隔的总周期没有和元素数量对齐，第4个元素开始播放时，第1个元素的反向动画刚好进入显示区间，就会出现重叠

修复方案 #

直接移除alternate参数，调整动画关键帧和时长匹配4个元素的轮播周期即可，修复后代码如下：

CSS代码

/* 调整关键帧，适配单元素16s总周期，对应4个元素每个占4s的轮播节奏 */
@keyframes fadeCycle {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

li {
  list-style: none;
  padding: 0;
  font-size: 40px;
  position: absolute;
  width: 100%;
  opacity: 0;
  /* 移除alternate，用单向循环动画 */
  animation: fadeCycle 16s ease-in-out infinite;
}

li:nth-of-type(1) {
  animation-delay: 0s;
}

li:nth-of-type(2) {
  animation-delay: 4s;
}

li:nth-of-type(3) {
  animation-delay: 8s;
}

li:nth-of-type(4) {
  animation-delay: 12s;
}

HTML代码不需要改动

<ul class="usp__list">
  <li class="usp__item">
    Item 1
  </li>
  <li class="usp__item">
    Item 2
  </li>
  <li class="usp__item">
    Item 3
  </li>
  <li class="usp__item">
    Item 4
  </li>
</ul>

效果说明 #

修改后每个元素依次渐入、停留、渐出，切换过程有自然的淡入淡出过渡，不会出现多个元素完全显示的重叠问题。如果需要调整单个元素的停留时长，只需要等比例修改关键帧的百分比即可。

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