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

【问题标题】：How to make a horitonzal sliding infinite animation using CSS?如何使用 CSS 制作水平滑动无限动画？
【发布时间】：2014-05-02 04:58:59
【问题描述】：

我正在尝试制作一个包含 3 行图像的无限水平滑块。

看起来像这样：

但是正如你看到的，当图像行的末尾到达时，有一个巨大的空白区域，而图像终于又出现了。

您可以在这里进行现场测试：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%);
    }
}

我希望永远不要看到那个空白区域，我希望它永远滚动。任何人都知道如何实现这种行为？

谢谢，祝你有美好的一天。

【问题讨论】：

我认为 JS 解决方案不是最优的吗？一种想法是将一行图像分成两半，每一半都比页面宽度长，并对每一半应用不同的动画，这样一旦第一个离开屏幕，它就会出现在第二个后面的屏幕上？
我找到了一个infinite css carousel，你也许可以适应它：DEMO
只要它在所有平台上都能响应，我不介意在其中添加一些 js。感谢@LcLk 的解释，这是一个好的开始。我会检查一下旋转木马，也许我可以从中挖掘一些东西，谢谢！
嗨，任何反馈都会很好:) .... ze clone idea: jsfiddle.net/q596y/8

标签： html css animation

【解决方案1】：

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

至少有足够多的第一个来填满屏幕的整个宽度，或者分成两个不同的标签，你的元素。

因此，一旦它们的一部分向左移动，您将它们移回右端以填充空白空间以继续滚动而没有任何间隙。

您的案例需要 javascript。

这么多逐行包装的图片需要克隆整个ul。

一个很好的折衷办法是在两个ul 中拆分内容，这样一个可以到下一个屏幕。

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

jQuery DEMO 你的小提琴。

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

但是对于小的“marquee like”，你可以使用伪元素来克隆前几张图片。

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

伪和文本阴影避免内容重复。

展示克隆想法的一些可怕的 CSS 示例：http://dabblet.com/gist/5656795

【讨论】：

我没有可供使用的 JavaScript，也没有您可以使用的已知资源。其他人可能:)