请求实现容器内多个Div的自动左右滑动切换动画效果

我来帮你搞定这个自动滑动的动画效果！咱们可以通过CSS动画结合一个简单的结构调整来实现——既能让Div从右向左逐个替换，还能让容器两端露出部分子元素。下面分两种常见的效果给你演示：

一、连续平滑滚动效果 #

这种效果是子元素持续从右向左滑动，无缝循环。

调整后的HTML结构 #

我们需要给子元素加一个外层包裹容器，方便整体控制动画，同时复制第一个子元素让循环更自然：

<div id="parent">
  <div class="wrapper">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
    <!-- 复制第一个元素，实现无缝循环 -->
    <div>Div 1</div>
  </div>
</div>

核心CSS代码 #

#parent {
  width: 600px; /* 比子元素宽100px，刚好露出两端部分区域 */
  overflow: hidden; /* 隐藏容器外的内容，只显示可视区域 */
  margin: 0 auto;
}

.wrapper {
  display: flex;
  /* 动画：持续12秒线性滚动，无限循环 */
  animation: smoothSlide 12s linear infinite;
}

#parent .wrapper > div {
  width: 500px;
  height: 500px;
  padding: 15px;
  background-color: grey;
  border-radius: 20px;
  text-align: center;
  margin: 15px;
  flex-shrink: 0; /* 禁止子元素被压缩，保证宽度一致 */
}

@keyframes smoothSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 计算滑动距离：单个子元素总宽度（500+30边距）× 原始元素数量4 */
    transform: translateX(calc(-530px * 4));
  }
}

二、逐个替换（滑动+停留）效果 #

如果希望子元素滑动到位置后停留一段时间，再切换下一个，只需要修改动画的时间函数为steps即可：

修改后的CSS动画部分 #

.wrapper {
  display: flex;
  /* 总时长10秒：4个元素，每个停留2秒+滑动0.5秒 */
  animation: stepSlide 10s steps(4, end) infinite;
}

@keyframes stepSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-530px * 4));
  }
}

关键细节说明 #

• 加.wrapper容器是为了让所有子元素作为一个整体移动，避免单个元素动画的混乱
• 复制第一个子元素是为了动画结束时，复制的元素刚好衔接开头，实现无缝循环，不会出现“跳帧”
• flex-shrink: 0必须加上，不然子元素会因为容器宽度被压缩，破坏布局
• 父容器宽度设置为比子元素宽，就能轻松实现“两端看到部分Div”的效果，你可以根据需求调整这个宽度值

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