CSS 动画将 div 向上移动

Question

我想使用 CSS 动画将这些 div 向上移动，如下面所附的 GIF 所示。

所有的 div 以相同的速度向上移动。

我尝试了大帐篷标签，但据我所知，它已经贬值或即将贬值。所以我不能用它。

我从来没有做过CSS动画。所以非常感谢您的帮助。

每列有 6 个项目。当全部 6 项完成后，又从第 1 项开始。溢出的元素保持隐藏状态，直到显示所有其他项目，然后在第 6 个元素之后再次从底部出现。

.gridcontainer{
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px;
  color: white;
  border-radius: 10px;
  

}

.grid{
display:grid;
justify-items: center
}


    .grid--1x3{
      grid-template-columns: 1fr 1fr 1fr;
     justify-items: "center"
    }
    
    .flexcolumn {
    display:flex;
    flex-direction: column;
    }
  

    <div class='grid grid--1x3'>

<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>

</div>
<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>

</div>

<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>

</div>

</div>

Answer 1

实现连续移动的一种方法是在一个容器中拥有所有内容的两个副本。

然后容器向上平移，但只是其高度的一半 - 第二个副本将在动画结束时被第一个副本覆盖，因此看起来是连续的。

此代码段假设外部容器可能具有不同（较小）的高度（如 gif 所示 - 并非所有消息同时显示） - 因此存在一个隐藏了溢出的外部容器和一个被翻译的内部容器向上。

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.gridcontainer {
  background: black;
  width: 100%;
  padding: 20px;
  margin: 5px;
  color: white;
  border-radius: 10px;
}
.outer {
  overflow: hidden;
  height: 400px;
  width: 100vw;
  display: flex;
  justify-content: center;
}

.inner {
  animation: move 10s linear infinite;
  rposition: relative;
  height: fit-content;
  
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.grid {
  display: grid;
  gap: 2vw;
  justify-content: space-around;
  height: fit-content;
}

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

.flexcolumn {
  display: flex;
  flex-direction: column;
}
</style>
<div class="outer">
<div class="inner">
  <div class='grid grid--1x3'>

    <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>

    </div>
    <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>

    </div>

    <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>

    </div>

  </div>
  <div class='grid grid--1x3'>

    <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>

    </div>
    <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>

    </div>

    <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>

    </div>

  </div>
</div>
</div>