使用 CSS3 动画无限滚动 Div

Question

我创建了一个半工作的动画滚动<div> 。 动画有效，但我希望它“环绕”。 我的意思是，当第一个元素离开屏幕底部时，它从顶部下降，或者堆叠在顶部的“队列”顶部。

我怎样才能做到这一点？ 使用 2 个相同的 div 是唯一的方法吗？

我的 CSS 代码如下：

.posts 
{
-webkit-animation: movetweets 10s linear infinite;
-moz-animation: movetweets 10s linear infinite;
-o-animation: movetweets 10s linear infinite;
}   

@-webkit-keyframes movetweets {
    from {margin-top: -100%;}
    to {margin-top: 100%;}
}
@-moz-keyframes movetweets {
    from {margin-top: -100%;}
    to {margin-top: 100%;}
}
@-o-keyframes movetweets {
    from {margin-top: -100%;}
    to {margin-top: 100%;}
}

这是一个JSFiddle ，其中包含一些与我的 HTML 格式相同的通用 html。

Answer 1

如果您正在寻找无 jquery/js 解决方案，我已经制作了下面的小提琴，可在 Chrome、Firefox、IE 和 Safari 中使用。 我使用了 marquee 标签来代替 CSS3 动画，因为我觉得这是一个更优雅的解决方案。

http://jsfiddle.net/simsketch/aj5t2m1k/

 <div style="width: 125px; height: text-align:left; box-shadow: 0px 0px 10px 0px #C0C0C0; background: #FFFFFF; padding: 0px;"> <marquee onmouseover='this.stop();' onmouseout='this.start();' direction="up" height="125" scrollamount="2"> <div> <a href="#" rel="nofollow" target="_blank"> <img src="https://via.placeholder.com/125x125" width="125" height="125" alt="scrolling vertical image marquee" /> </a> </div> <div><br/> <a href="#" rel="nofollow" target="_blank"> <img src="https://via.placeholder.com/125x125" width="125" height="125" /></a> </div> <div><br/> <a href="#"> <img src="https://via.placeholder.com/125x125" width="125" height="125" /></a> </div> <div><br/> <a href="#" rel="nofollow" target="_blank"> <img src="https://via.placeholder.com/125x125" width="125" height="125" /></a> </div> </marquee> </div>

如果使用 jquery 或 js 是可以接受的，下面是一个很棒的垂直滑块，有很多选项。

http://www.jssor.com/demos/vertical-slider.html