javascript - 如何修改 CSS3 滚动框动画无限循环而不是重新开始？

Question

jsfiddle 在这里，因为这更容易展示而不是描述:https://jsfiddle.net/phzakg62/

这是一个 15 秒的纯 CSS 垂直滚动文本动画，在 15 秒结束时，它会反向滚动回到顶部以便重新开始。 (在我正在构建的真实页面中，它位于一个带有溢出的固定高度框中:隐藏，但我从 jsfiddle 中删除了所有与动画不直接相关的代码。)

有没有一种方法可以通过让滚动 UL 中的最后一个 LI 紧跟第一个 LI 来修改它以提供永远滚动的外观，而无需重新开始？也许某种动态的东西会复制 UL 并在动画结束时将其附加到自身？

我不认为这里有纯 CSS 的解决方案，所以我在这个问题中添加了 JavaScript 标签，但如果有什么东西不会破坏 JS 的人的纯 CSS 动画，我会很高兴关闭。

提前致谢。

#scroll-wrap ul {
  animation: scroller 15s cubic-bezier(1, 0, .5, 0) infinite;
}

@keyframes scroller {
    0%   {margin-top: 0}
    5%   {margin-top: -5.12rem}
    10%  {margin-top: -10.24rem}
    15%  {margin-top: -15.36rem}
    20%  {margin-top: -20.48rem}
    25%  {margin-top: -25.6rem}
    30%  {margin-top: -30.72rem}
    35%  {margin-top: -35.84rem}
    40%  {margin-top: -41rem}
    45%  {margin-top: -46.12rem}
    50%  {margin-top: -51.24rem}
    55%  {margin-top: -56.36rem}
    60%  {margin-top: -61.48rem}
    65%  {margin-top: -66.6rem}
    70%  {margin-top: -71.72rem}
    75%  {margin-top: -76.84rem}
    80%  {margin-top: -82rem}
    85%  {margin-top: -87.12rem}
    90%  {margin-top: -92.24rem}
    95%  {margin-top: -97.36rem}
    100% {margin-top: 0}
}

Answer 1

只能通过在 html 中复制列表来在 CSS 中完成。

我只是将同一个列表放了两次(您必须将动画速度减半)。并在最后一帧快速滚动回到顶部。

这不是一个很好的解决方案，但它只是 CSS。

<div id="scroll-wrap">
    <ul id="scroller">

       ...items...

       ...exact copy of items...
    </ul>
</div>

CSS

#scroll-wrap ul {
    animation: scroller 15s cubic-bezier(1, 0, .5, 0) infinite;
}

@keyframes scroller {
    0%   {margin-top: 0}
    ...
    50%  {margin-top: -25rem}
    90%  {margin-top: -45rem}
    95%  {margin-top: -49rm}
    99.9% {margin-top: -50rem}
    100% {margin-top: 0}
}

https://jsfiddle.net/phzakg62/4/