首页 / 技术问答 / Css问答列表 / 问答详情

CSS动画移动divs upwords

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

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

我试了试字幕标签，但据我所知，它已经贬值或很快就会贬值.所以我不能用它.

我从来没有做过css动画.所以我会非常感谢你的帮助.

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

enter image description here

Video demo here

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

推荐答案

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

然后，容器向上平移，但只有其高度的一半-动画结束时，第一个副本将覆盖第二个副本，这样看起来就像是连续的.

此代码片段假设外容器可能具有不同(较小)的高度(如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>

Css相关问答推荐

下拉面板未与Angular中的下拉文本框垂直对齐

R SHINY：FILL CONTAINER=TRUE时调整DT数据表高度，

正确的`最小/最大宽度`+`非(设备类型)`css媒体查询的语法

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

为什么继承时1rem值不同？

如何通过重复的网格区域来简化网格布局？

在 css Select 器中匹配 unicode char

用css重复表格边框

Flexbox 子高度它的内容

使用之前和之后为锚标签添加画笔描边效果

svg 背景图像位置始终在 Internet Explorer 中居中，尽管 background-position： left center;

隐藏元素，但显示 CSS 生成的内容

iPhone X / 8 / 8 Plus CSS 媒体查询

HTML 元素默认为 display：inline-block？

最大宽度与最小宽度

让 div 占据 100% 身体高度，减go 固定高度的页眉和页脚

Angular 动画的目的是什么？

弹性框中的边距折叠

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

通过 Bootstrap4 对列进行排序

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630