CSS关键帧轮播顺序错乱及显示时长异常问题求助

你的问题出在多组keyframes的时间逻辑不统一，以及动画结束后的状态没有归位，导致循环时图片重叠、显示时长不足。下面是修复后的方案，所有图片共用一套动画逻辑，保证每张图显示时长一致，循环衔接顺畅。

修复后的代码 #

CSS #

.imageContainer {
  position: relative;
  width: 100%;
  height: 640px; /* 按需调整 */
  overflow: hidden; 
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: slide 9s infinite; /* 3张图×3秒显示时长=总周期9秒 */
}

.image:nth-child(1) {
  animation-delay: 0s;
}

.image:nth-child(2) {
  animation-delay: 3s; /* 延迟时间等于单张图的显示时长 */
}

.image:nth-child(3) {
  animation-delay: 6s;
}

@keyframes slide {
  /* 初始状态：在容器右侧，完全透明 */
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  /* 入场完成：滑到容器中间，完全显示 */
  5% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 保持显示：持续到38.33%（3秒显示时长占总周期9秒的33.33%，加上5%的入场时间） */
  38.33% {
    transform: translateX(0);
    opacity: 1;
  }
  /* 退场完成：滑到容器左侧，完全透明 */
  43.33% {
    transform: translateX(-100%);
    opacity: 0;
  }
  /* 回到初始位置：在容器右侧，等待下一轮循环 */
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

HTML（无需修改） #

<div class="imageContainer">
  <img class="image" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
  <img class="image" src="https://images.ctfassets.net/hrltx12pl8hq/3Z1N8LpxtXNQhBD5EnIg8X/975e2497dc598bb64fde390592ae1133/spring-images-min.jpg" />
  <img class="image" src="https://media.istockphoto.com/id/1322277517/photo/wild-grass-in-the-mountains-at-sunset.jpg?s=612x612&w=0&k=20&c=6mItwwFFGqKNKEAzv0mv6TaxhLN3zSE43bWmFN--J5w=" />
</div>

关键调整说明 #

• 统一动画周期：总时长设为「单张图显示时长 × 图片数量」，这里用3秒显示时长，总周期9秒，确保循环节奏一致。
• 单套keyframes复用：所有图片共用同一个动画逻辑，仅通过animation-delay错开启动时间，避免多套keyframes的逻辑冲突。
• 状态归位：动画结束时让图片回到容器右侧的初始位置，防止循环下一轮时和下一张图重叠。
• 灵活调整时长：如果要改成2秒显示时长，只需把总周期改为6秒，animation-delay分别设为0s、2s、4s，关键帧里的38.33%改为38.33%（2/6≈33.33%+5%），43.33%改为43.33%即可。

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