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

Question

我试图制作一个包含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%);
    }
}

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

谢谢你，祝你有个愉快的一天。

Answer 1

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

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

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

您的案例需要javascript。

如此多的图像逐行包装需要克隆整个ul。

一个很好的折衷方案可能是将内容分成两个ul，这样就可以进入下一次屏幕。

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

你小提琴的jQuery DEMO 。

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

---

但对于小型＆＃34; marquee喜欢＆＃34; ，你可以使用伪元素克隆前几张图片。

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

伪和文字阴影可以避免重复内容。

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

Answer 2

这样的事情会起作用吗？

http://css-tricks.com/infinite-all-css-scrolling-slideshow/