Бесконечная бесшовная прокрутка изображений в сети

Question

Я пытаюсь заставить изображения прокручиваться по экрану. Я нашел код, который работает для меня, за исключением бесшовной части. Последнее изображение исчезает в левой части экрана, а через 2 или 3 секунды первое изображение появляется снова. Чтобы получить изображение «12», сразу за ним следует «1» в виде непрерывного непрерывного изображения l oop. Любая помощь будет принята с благодарностью.

Этот код можно увидеть здесь: http://www.joecontirc.com/test/test.html Я установил скорость прокрутки, чтобы быстро добраться до конца изображений, пытаясь заставить его работать.

Вот мой код, использующий тестовые изображения для упрощения:

 <style style="text/css">
  .scroll-slow {
   height: 100px;   
   overflow: hidden;
   position: relative;
  }
  .scroll-slow .inner {
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   line-height: 100px;
   text-align: center;
   /* Starting position */
   -moz-transform:translateX(0%);
   -webkit-transform:translateX(0%);    
   transform:translateX(100%);
   /* Apply animation to this element */    
   -moz-animation: scroll-slow 5s linear infinite;
   -webkit-animation: scroll-slow 5s linear infinite;
   animation: scroll-slow 5s linear infinite;
  }
  /* Move it (define the animation) */
  @-moz-keyframes scroll-slow {
   0%   { -moz-transform: translateX(100%); }
   100% { -moz-transform: translateX(-100%); }
  }
  @-webkit-keyframes scroll-slow {
   0%   { -webkit-transform: translateX(100%); }
   100% { -webkit-transform: translateX(-100%); }
  }
  @keyframes scroll-slow {
   100%   { 
   -moz-transform: translateX(100%); /* Browser bug fix */
   -webkit-transform: translateX(100%); /* Browser bug fix */
   transform: translateX(100%);         
   }
   100% { 
   -moz-transform: translateX(-100%); /* Browser bug fix */
   -webkit-transform: translateX(-100%); /* Browser bug fix */
   transform: translateX(-100%); 
   }
  }
  </style>
  <div class="scroll-slow">
   <div class="inner" style="position: absolute; left: 0px; right: 0px; top: 0px; width: 2880px; height: 0px">
    <img src="1.png" width="200" height="96">
    <img src="2.png" width="200" height="96">
    <img src="3.png" width="200" height="96">
    <img src="4.png" width="200" height="96">
    <img src="5.png" width="200" height="96">
    <img src="6.png" width="200" height="96">
    <img src="7.png" width="200" height="96">
    <img src="8.png" width="200" height="96">
    <img src="9.png" width="200" height="96">
    <img src="10.png" width="200" height="96">
    <img src="11.png" width="200" height="96">
    <img src="12.png" width="200" height="96">
   </div>
  </div>