是否可以创建相同 html 元素的无限循环，从顶部滚动到底部，具有类似门户的效果？

Question

我正在尝试使用一组 html 元素创建一个无限循环的动画，类似于选取框。目标是在动画开始时让所有元素在容器中可见，每个元素都向下滑动。一旦底部元素开始超出框架，它就会再次出现在容器的顶部。

到目前为止，我所做的是复制我想要重复的元素，并为每组元素添加不同的动画。第一组元素的动画设置为从屏幕开始，然后一直向下离开屏幕的另一端，所用时间是第二组元素动画所用时间的两倍。

第二组元素将从容器顶部开始并从那里离开屏幕。

我得到了这个动画的第一次迭代所需的结果，但随后有一个巨大的白色 space。所以，我并没有真正正确地重复动画。

我想我可以使用 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>

Answer 1

https://codepen.io/Nerdpuff/pen/PoPXNpQ

问题是动画没有在正确的时间 'reset'。

我已经更改了它，所以两个动画都采用 9s 并且都具有相同的差异。但他们堆叠。

当slider2即将top: 0%并重置时，slider在0%和'continues the loop'启动。

是否可以创建相同 html 元素的无限循环，从顶部滚动到底部，具有类似门户的效果？

Is it possible to create an endless loop of the same html elements, scrolling from the top to the bottom with a portal like effect?

javascript

jquery

css

css-animations

marquee