如何用CSS Animation实现Div向上循环滚动效果？

核心思路 #

• 给每列加固定高度的容器，设置overflow: hidden隐藏超出元素
• 复制每列的6个元素，让动画容器内有12个元素，实现滚动到末尾时无缝衔接
• 用CSS @keyframes 定义向上平移动画，让容器整体移动一个完整列的高度，循环执行

修改后的完整代码 #

CSS 部分

/* 保留原有样式，新增滚动相关样式 */
.gridcontainer{
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px 0; /* 调整列内元素间距 */
  color: white;
  border-radius: 10px;
  box-sizing: border-box; /* 防止padding撑宽元素 */
}

.grid{
  display: grid;
  justify-items: center;
  gap: 20px; /* 列之间添加间距 */
}

.grid--1x3{
  grid-template-columns: 1fr 1fr 1fr;
}

/* 新增：滚动可视容器，控制每列显示范围 */
.scroll-column {
  height: 450px; /* 按6个元素总高度调整，可根据实际情况修改 */
  overflow: hidden;
  width: 100%;
}

/* 新增：动画容器，包含两倍元素实现无缝衔接 */
.flexcolumn {
  display: flex;
  flex-direction: column;
  animation: scroll-up 12s linear infinite; /* 12秒滚动一次，匀速循环 */
}

/* 定义向上滚动动画 */
@keyframes scroll-up {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  100% {
    transform: translateY(-50%); /* 向上移动一半高度，刚好切换到复制的元素 */
  }
}

HTML 部分

<div class='grid grid--1x3'>
  <!-- 第一列：外层添加滚动容器，内层复制元素 -->
  <div class='scroll-column'>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>
      <!-- 复制元素实现无缝衔接 -->
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>
    </div>
  </div>

  <!-- 第二列 -->
  <div class='scroll-column'>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>
    </div>
  </div>

  <!-- 第三列 -->
  <div class='scroll-column'>
    <div class='flexcolumn'>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>
      <span class='gridcontainer'>Element A</span>
      <span class='gridcontainer'>Element B</span>
      <span class='gridcontainer'>Element C</span>
      <span class='gridcontainer'>Element D</span>
      <span class='gridcontainer'>Element E</span>
      <span class='gridcontainer'>Element F</span>
    </div>
  </div>
</div>

关键调整说明 #

1. 滚动容器高度：scroll-column的height要匹配6个gridcontainer的总高度，可根据实际元素尺寸修改
2. 动画速度：animation中的12s是完整滚动一次的时长，数值越小滚动越快，可自行调整
3. 无缝滚动逻辑：复制元素后，动画容器向上移动50%时，复制的元素刚好接在原元素后面，实现无断层循环
4. 匀速效果：使用linear动画曲线，保证全程滚动速度一致

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