Анимация бесконечных элементов с помощью jquery и css

Вы можете попробовать что-то вроде этого: https://jsfiddle.net/sfemv6qd/9/

HTML является базовым, например:

<div id="infinitescrollercontainer">
 <ul class="infinitescroller">
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
 </ul>  

The CSS is similarly basic:

#infinitescrollercontainer {
  position:relative;
  display:block;
  overflow:hidden;
  width:300px;
  height:100px;
}

.infinitescroller {
  display:block;
  position:absolute;
  top:0;
  left:0;
  list-style:none;
  padding:0;
  margin:0;
}
.infinitescroller li {
  display:inline-block;
  float:left;
  width:80px;
  height:100px;
  background-color:black;
  color: white;
  border:2px solid blue;
  margin-left:10px;
}

JQuery заставляет все это работать, дублируя исходный набор элементов, помещая дублированный набор элементов справа от исходного набора элементов, а затем медленно перемещая элементы влево. Когда исходный набор элементов уходит из поля зрения, он помещает их справа от дублированного набора элементов. Затем он продолжает делать это вечно.

jQuery:

// select the scroller, we'll need this often
var theScroller = $('.infinitescroller');
var theScrollSpeed = 5000;
// calculate the scroller width, we do this by getting
// the width of one element and then multiplying it by the number of elements
// (after some experimentation this seemed to work best)
var theScrollerWidth = theScroller.children('li').first().outerWidth(true) * theScroller.children('li').length;
theScroller.css('width', theScrollerWidth);
// now we clone the original scroller so we have 2 to work with
var theScrollerDupe = theScroller.clone();
// adjust the left position to put it after the first scroller
theScrollerDupe.css('left',theScrollerWidth); 
theScroller.after(theScrollerDupe); // insert it into the DOM

// do the scrolling with a nice function
var doTheScrolling = function() {
  theScroller.animate({
    left: theScroller.position().left - theScrollerWidth
  }, theScrollSpeed, 'linear');
  theScrollerDupe.animate({
    left: theScrollerDupe.position().left - theScrollerWidth
  }, theScrollSpeed, 'linear', function() {
    appendScrollers(); // move the scrollers
  });
};

// whichever scroller is off to the left of the screen now needs to
// appear after the scroller we can see..
var appendScrollers = function() {
  // find out which scroller we should move by seeing which one is further to the left
  if(theScrollerDupe.position().left < theScroller.position().left) {
    theScrollerDupe.css('left',theScrollerWidth + 'px');
  } else {
    theScroller.css('left',theScrollerWidth + 'px');
  }
  doTheScrolling();
}

// do some scrolling..
doTheScrolling();

Я уверен, что есть библиотеки, которые сделают это за вас, но я бы сделал это без библиотеки.