关于使用transform: translateX实现CSS图片轮播的问题咨询

可以通过translateX实现两张图片的循环轮播效果，以下是问题的解决方案和修改后的代码：

问题原因与解决思路 #

• 问题1解决：无需给图片设置position: absolute，原代码中第二张图无法显示的核心原因是flex布局的子元素默认会自动收缩，你没有给轮播项（<picture>标签）设置固定宽度和禁止收缩属性，导致两张图被挤压在父容器宽度内。给<picture>设置width: 100%; flex-shrink: 0即可让两张图并列排布在.slider-wrapper中，所有元素都在正常文档流内，父元素.container的overflow: hidden自然生效，不会出现失效问题。
• 问题2解决：要实现循环，不需要单独给两张图片加动画，直接控制.slider-wrapper的translateX位移即可。完整的轮播周期为「图1停留3s → 2.5s切换到图2 → 图2停留3s → 2.5s切回图1」，总周期为11s，把对应状态写入动画关键帧，设置动画无限循环即可实现自动循环，不需要单独处理第一张图的复位逻辑，动画会自动回到初始状态。

如果要上线优化性能，直接将关键帧中的translateX替换为translate3d即可，其他逻辑无需调整。

完整修改代码 #

body {
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
}

.container {
  width: 500px;
  height: 333px;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  animation: slide 11s cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
}

.slider-wrapper picture {
  width: 100%;
  flex-shrink: 0;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  /* 0-3s 图1停留 */
  0%, 27.3% {
    transform: translateX(0);
  }
  /* 3-5.5s 切换到图2，耗时2.5s */
  50% {
    transform: translateX(-100%);
  }
  /* 5.5-8.5s 图2停留3s */
  50%, 77.3% {
    transform: translateX(-100%);
  }
  /* 8.5-11s 切回图1，耗时2.5s */
  100% {
    transform: translateX(0);
  }
}

<div class="container">
  <div class="slider-wrapper">
    <picture>
      <img class="image hero-image-1" src="https://drive.google.com/uc?export=view&id=1l7cTX35wqd-4eYvFL8A5QLZ7LbOF9m4J">
    </picture>
    <picture>
      <img class="image hero-image-2" src="https://drive.google.com/uc?export=view&id=1iB9R1aoeYSmkPX9Ju3NNOZhKylOjCA0y">
    </picture>
  </div>
</div>

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