How to create an auto scrolling list

Question

I'm trying to build a auto scrolling list using CSS animation.

What I got now:

.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>

Question is, is it possible to make Player 1 showing under Play 4 while it disappears from the top? Like an end to end circle.

JavaScript solution is an option.

Answer 1

Try this Demo.

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));
    });
});