我试图使用一组html元素创建一个无尽的动画循环，类似于marquee。我们的目标是在动画开始时，所有元素都在容器中可见，每个元素都向下滑动。一旦底部元素开始出格，它就会再次出现在容器的顶部。
到目前为止，我所做的，是重复我想要重复的元素，并为每一组元素添加不同的动画。第一组元素的动画被设置为从屏幕外开始，并以第二组元素动画所需时间的两倍从屏幕的另一端一直向下。
第二组元素将从容器的顶部开始，然后从那里离开屏幕。
我在这个动画的第一次迭代中得到了想要的结果，但随后就出现了一个巨大的白色空间。所以，我并没有真正正确地重复这个动画。
我在想我可以用javascript设置一个时间间隔，这样每次动画结束时，我就可以把元素重新定位回它们的起始位置，但我不确定这是否是最好的实现方式。
.slider {
height: 200px;
background-color: #ddd;
border:solid 1px black;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
position: relative;
display:flex;
justify-content: flex-start;
flex-direction: column;
}
.slide{
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 20px;
position: absolute;
width:100%;
}
.slide > div{
height:calc(200/8);
width:100%;
border:solid 1px red;
display:flex;
justify-content: center;
}
.one{
top:-100%;
animation:slider2 18s linear infinite;
}
.two{
top:0px;
animation: slider 9s linear infinite;
}
@keyframes slider {
0% { top:0px; }
100% { top:100% }
}
@keyframes slider2{
0% { top:-100%; }
100% { top:100% }
}
<body>
<div class='slider'>
<div class='slide one'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class='slide two'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>https:/codepen.ioNerdpuffpenPoPXNpQ
问题是动画没有在正确的时间 "重置"。
我把它改了，所以两个动画都采取了 9s 且两者行程相差无几。但它们叠加。
当 slider2 正要 top: 0% 和复位。slider 启动于 0% 并 "继续循环"。