infinite-slideshow.jpg

Для начала нам понадобиться сделать одно большое изображение, у которого начало и конец будут совпадать.
Чтобы оживить наш слайдер, будем перемещать наше изображение пока первая картинка не появится снова в конце цикла. После чего мы быстро возвращаемся обратно в исходное положение и начинаем все заново.

Нам нужна обертка для относительного позиционирования и скрытия части изображения, которая вне контейнера.

<div class="slideshow">
   <div class="images">
       A slideshow of images in here (whatever you want to say for screen readers)
   </div>
</div>
.slideshow {
  position: relative;
  overflow: hidden;
}
.images {
  background: url(slideshow.jpg);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: slideshow 10s linear infinite;
  -moz-animation:    slideshow 10s linear infinite;
}
@-webkit-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
@moz-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}

Demo 1

Небольшой трюк для увеличения производительности, особенно в WebKit / Mobile WebKit. Для этого заставим браузер использовать 3D вычисления

.images {
   ...

   /* Hey browser, use your GPU */
   -webkit-transform: translate3d(0, 0, 0);
}

@-webkit-keyframes moveSlideshow {
    0%   {
        -webkit-transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-200%);
    }
}
@-moz-keyframes moveSlideshow {
    0%   {
        -moz-transform:    translateX(0);
    }
    100% {
        -moz-transform:    translateX(-200%);
    }
}

Demo 2

<div class="slideshow">
   <div class="images-1">
       A slideshow of images in here (whatever you want to say for screen readers)
   </div>
   <div class="images-2">
   </div>
</div>
.slideshow > div {
   ...

    -moz-transition:  opacity 0.5s ease-out;
       -o-transition: opacity 0.5s ease-out;
  -webkit-transition: opacity 0.5s ease-out;
      -ms-transition: opacity 0.5s ease-out; 

    /* Slow */
    -webkit-animation: moveSlideshow 60s linear infinite;
    -moz-animation:    moveSlideshow 60s linear infinite;

    ...
}

.images-1 {
    /* Fast */
    -webkit-animation: moveSlideshow 20s linear infinite;
    -moz-animation:    moveSlideshow 20s linear infinite;
    /* Sprite */
    background-position: 0 200px;
}

.slideshow:hover .images-2 {
    opacity: 0;
}