如何创建自动滚动列表

Question

我正在尝试使用CSS动画构建自动滚动列表.

我现在得到了什么:

.players {
  -webkit-transition: opacity 0.5s ease-out;
  -webkit-animation: autoScrolling 5s linear infinite;
  height: 20em;
}
.players .list-group-item {
  height: 5em;
}
@-webkit-keyframes autoScrolling {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -20em;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-6">
    <ul class="list-group players">
      <li class="list-group-item">Player 1</li>
      <li class="list-group-item">Player 2</li>
      <li class="list-group-item">Player 3</li>
      <li class="list-group-item">Player 4</li>
    </ul>
  </div>
</div>

问题是,是否有可能让玩家1在Play 4下显示而从顶部消失？就像一个端到端的圈子.

JavaScript解决方案是一种选择.

Answer 1

试试这个演示。

window.players = function($elem) {
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('.players > li').height();
    if(top < temp) {
        top = $('.players').height()
        $elem.css("top", top);
    }
    $elem.animate({ top: (parseInt(top)-60) }, 600, function () {
      window.players($(this))
    });
}
$(document).ready(function() {
    var i = 0;
    $(".players > li").each(function () {
          $(this).css("top", i);
          i += 60;
          window.players($(this));
    });
});