Question

这里是jsfiddle，因为这比描述更简单：https://jsfiddle.net/phzakg62/

这是一个15秒仅限CSS的垂直滚动文本动画，在15秒结束时，它会向后滚动到顶部，以便重新开始。（在我正在构建的真实页面中，它处于一个固定高度的框中，溢出：隐藏，但是我从jsfiddle中移除了与动画没有直接关系的所有代码。）

有没有一种方法可以通过滚动UL中的最后一个LI跟随第一个LI来修改它以永久地滚动外观，而不再重新开始？也许某种动态的东西会复制UL＆amp;在动画结束时将它附加到自身？

我不会想象这里只有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/

Answer 2

滚动可能会有问题。看看这个：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)

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

2 个答案: