如何使用CSS制作水平滑动的无限动画？

Question

我想制作一个拥有三行图片的无限水平滑动条。

它看起来像这样：

但是当图片行的末尾到达时，会出现一个巨大的空白空间，直到图像再次出现。

您可以在此处进行实时测试：http://jsfiddle.net/tbergeron/q596y/6/

这是CSS的代码：

ul.lists {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    -webkit-animation: moveSlideshow 180s linear infinite;
    -moz-animation:    moveSlideshow 180s linear infinite;
}

ul.lists li {
    list-style: none;
    display: inline-block;
}

ul.lists li img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

ul.slider2 {
    top: 140px;
}

ul.slider3 {
    top: 280px;
}

@-webkit-keyframes moveSlideshow {
    0%   {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-300%);
    }
}
@-moz-keyframes moveSlideshow {
    0%   {
        -moz-transform:    translateX(0);
    }
    100% {
        -moz-transform:    translateX(-300%);
    }
}

我希望不再看到那个空白的位置，而是让它无限滚动。有没有人知道如何实现这种行为？

谢谢，祝您拥有愉快的一天。

- Tommy B.

---

我理解 JS 方案不是最优的选择？一种想法是将图片行分成两半，每半都比页面宽，对每个半部分应用不同的动画效果，这样当第一个半部分离开屏幕后，它会在第二个半部分后面重新出现在屏幕上吗？ - caffeinated.tech

我发现了一个无限制CSS轮播图，你可以尝试适应它：演示。 - caffeinated.tech

只要在所有平台上都能响应，我不介意在其中添加一些js。感谢@LcLk的解释，这是一个很好的开始。我会检查那个走马灯，也许我可以从中挖掘出一些东西，谢谢！ - Tommy B.

嗨，任何反馈都很好 :) .... ze 克隆想法：http://jsfiddle.net/q596y/8/ - G-Cyrillus

Answer 1

基本上，您需要克隆您的元素。

至少要充分使用足够多的前面的元素来填满整个屏幕宽度，或者将您的元素分成两个不同的标签。

因此，一旦它们的一部分离开了左侧，您就将它们移回右端以填补空白空间，以保持无间隙滚动。

您的情况需要JavaScript。

因此，许多图像每行包装需要克隆整个 ul 。

一个很好的折衷方案可能是在两个 ul 中拆分内容，这样一个可以滚动到屏幕之外。

在HTML文档中复制整个 ul 可能不是一个好主意，我不建议这样做文字。

您可以查看fiddle的jQuery演示链接DEMO。

$(".lists.slider1").clone().appendTo("body");
$(".lists.slider2").clone().appendTo("body");
$(".lists.slider3").clone().appendTo("body");

---

但对于类似"跑马灯"的小型效果，您可以使用伪元素来克隆前几张图片。

对于已知长度（em）或已知容器宽度的文本，您可以使用text-shadow。

伪元素和text-shadow避免了内容的重复。

以下是一些可怕的CSS示例，展示了克隆的想法: http://dabblet.com/gist/5656795

- G-Cyrillus

---

我没有现成的JavaScript可供使用，也不知道你可以使用哪些资源。或许其他人有 :) - G-Cyrillus