Javascript，无限滑动动画上下移动

Question

我想在 JavaScript 中制作一个上下移动的无限幻灯片动画，如下图所示。 超出该区域的幻灯片不应显示，但幻灯片 1、2 和 3 应在幻灯片 3 之后再次查看。

我看到了https://www.w3schools.com/howto/howto_js_slideshow.asp 的链接，但我不知道该怎么做。 jQuery 不可用。我应该使用什么方法？

幻灯片应继续流过屏幕。

*{margin:0;padding:0;}
.parent{
  position:relative;
  width:700px;
  height:500px;
  background-color:lavender;
  overflow:hidden;
}
.block1,.block2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.block1{
  right:220px;
}
.block2{
  right:0px;
}

.c1,.c2,.c3{
  width:100%;
  height:220px;
}
.c1{background-color:red;}
.c2{background-color:pink;}
.c3{background-color:orange;}

<div class="parent">
  <div class="block1">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
  <div class="block2">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
<div>

Answer 1

由于要设置动画的项目的尺寸（高度）与包含元素的高度相比，所有三个项目（部分）一次都在视图中，有时同一项目的一小部分将在顶部和底部。

因此我们需要两个副本。每次迭代将每个块（即 3 个图像）移动 50% 的变换的 CSS 动画会产生连续流动。

*{margin:0;padding:0;}
.parent{
  position:relative;
  width:700px;
  height:500px;
  background-color:lavender;
  overflow:hidden;
}
.block1,.block2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.block1{
  right:220px;
}
.block2{
  right:0px;
}

.c1,.c2,.c3{
  width:100%;
  height:220px;
}
.c1{background-color:red;}
.c2{background-color:pink;}
.c3{background-color:orange;}

.block1, .block2 {
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.block1 {
  animation-name: slidedown;
}
.block2 {
  animation-name: slideup;
}
@keyframes slidedown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideup {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

<div class="parent">
  <div class="block1">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  </div>
  <div class="block2">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  </div>
<div>

Answer 2

不顺利，但我的解决方案

注意你的变化 - 延迟、动画时间和许多 另请查看这篇文章以获得更简短的解释：-https://css-tricks.com/almanac/properties/a/animation/

*{margin:0;padding:0;}
.parent{
  position:relative;
  width:700px;
  height:500px;
  background-color:lavender;
  overflow:hidden;
}
.block1,.block2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.block1{
  right:220px;
    -webkit-animation: expand 5s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
}
.block2{
  right:0px;
    -webkit-animation: expand 5s;
    animation-iteration-count:infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}

.c1,.c2,.c3{
  width:100%;
  height:120px;
}
@-webkit-keyframes expand{
    0%{top:0%}
    25%{top:100%}
    50%{top:0%}
    100%{top:100%;}
}
.c1{background-color:red;}
.c2{background-color:pink;}
.c3{background-color:orange;}

<div class="parent">
  <div class="block1">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
  <div class="block2">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
<div>