CSS动画实现的图片自动轮播失效问题求助

问题根源及修复步骤： #

• 绝对定位基准错误
  #imgs 设置了 position: absolute，但父元素 #slide 未设置 position: relative，导致轮播容器的定位基准变成整个文档，而非预期的 #slide 范围，直接破坏轮播布局。
  修复：给 #slide 添加相对定位与溢出隐藏：

  #slide {
    position: relative;
    overflow: hidden;
    height: 40vh;
  }
  

• 动画时间函数冲突
  #imgs 的 animation 属性同时写了 linear 和 ease，两个时间函数冲突，浏览器仅识别第一个，导致动画节奏异常。
  修复：保留单个时间函数，比如用 linear 保持匀速：

  animation: slide_img 10s linear alternate-reverse infinite;
  

• 轮播图片未设置宽度
  三张图片默认自适应挤压，无法形成横向排列的轮播序列，动画移动时看不到切换效果。
  修复：给每张轮播图设置容器宽度占比，同时保持图片比例：

  #imgs img {
    width: 100%;
    object-fit: cover;
  }
  

• keyframes 移动距离计算错误
  原动画中 transform: translateX(-100%) 是基于容器宽度为100%的逻辑，但三张图片横向排列时，#imgs 总宽度应为300%，移动距离需对应调整。
  修复：修改关键帧的位移值：

  @keyframes slide_img {
    0%, 100% {
      transform: translateX(0);
    }
    33% {
      transform: translateX(-33.33%);
    }
    66% {
      transform: translateX(-66.66%);
    }
  }
  

• 无效 CSS 选择器
  代码中 #slide > #img 选择器完全错误，HTML 中不存在 id="img" 的元素，直接删除该规则即可。

修复后完整轮播相关 CSS 代码： #

/* 轮播容器 */
#slide {
  position: relative;
  overflow: hidden;
  height: 40vh;
}

#imgs {
  display: flex;
  height: 100%;
  border: 3px solid red;
  animation: slide_img 10s linear alternate-reverse infinite;
  width: 300%;
  position: absolute;
}

#imgs img {
  width: 100%;
  object-fit: cover;
}

@keyframes slide_img {
  0%, 100% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-33.33%);
  }
  66% {
    transform: translateX(-66.66%);
  }
}

内容的提问来源于stack exchange，提问作者윤승현