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

How to modify CSS3 scrollbox animation to loop infinitely rather than starting over?

本文关键字：无限循环 动画 重新开始 滚动 何修改 修改 CSS3      更新时间：2023-09-26

jsput在这里，因为这比描述更容易显示: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}
}

在CSS中只能通过复制html中的列表来实现。

我只是把同样的列表放两次(你必须放慢一半的动画速度)。在最后一帧快速滚动到顶部。

这不是一个很好的解决方案，但它只是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/

滚动可能有问题。看看这个:https://jsfiddle.net/phzakg62/6/

var add_counter = 0
var original_length = $('#scroller li').size()
setInterval(function () {
    $('#scroller').append($('#scroller li:nth-child(' + add_counter % original_length + ')').clone())
    $('#scroller').css('margin-top', -add_counter * $('#scroller li:first-child').height())
    add_counter++
}, 200)
相关文章：