CSS交叉淡入淡出图片轮播：如何调整动画时序？

你遇到的问题根源是原代码的关键帧时序为5张图片设计，直接改成3张后，百分比对应的时间轴和需求不匹配，导致显示时长不足、切换无重叠。以下是调整后的代码和说明：

核心修改点 #

• 关键帧百分比重新计算：以总动画时长12秒（3张×4秒）为基准，调整淡入、停留、淡出的时间节点，确保每张图的视觉周期为4秒，且切换时淡入淡出重叠。
• 补全父容器定位：给.crossfade添加position: relative，确保子元素绝对定位生效（原代码遗漏此属性，可能导致布局异常）。
• 保留延迟逻辑：每张图的延迟仍为0s、4s、8s，保证轮播顺序正确。

完整代码 #

CSS #

.crossfade {
  height: 450px;
  width: 100%;
  position: relative; /* 新增：确保子元素绝对定位基于此容器 */
}

.crossfade > figure {
  animation: imageAnimation 12s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.crossfade > figure:nth-child(1) {
  background-image: url('https://picsum.photos/id/237/200/300');
}

.crossfade > figure:nth-child(2) {
  animation-delay: 4s;
  background-image: url('https://picsum.photos/seed/picsum/200/300');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 8s;
  background-image: url('https://picsum.photos/200/300?grayscale');
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8.33% { /* 1秒时完成淡入，对应总时长12秒的8.33% */
    opacity: 1;
    animation-timing-function: ease-out;
  }
  25% { /* 3秒时保持完全显示，到此时点开始准备淡出 */
    opacity: 1;
  }
  33.33% { /* 4秒时完全淡出，与下一张图的淡入阶段重叠 */
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

HTML #

<div class="crossfade">
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

时序说明 #

• 每张图的动画周期为12秒，延迟依次错开4秒：
  1. 第1张：0-1秒淡入，1-3秒完全显示，3-4秒淡出；
  2. 第2张：4-5秒淡入（与第1张的3-4秒淡出重叠），5-7秒完全显示，7-8秒淡出；
  3. 第3张：8-9秒淡入（与第2张的7-8秒淡出重叠），9-11秒完全显示，11-12秒淡出；
• 循环时第1张的淡入会和第3张的淡出重叠，无切换间隙，每张图的有效视觉时长刚好4秒。

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