С помощью CSS3 можно творить удивительные вещи. Например, бесконечное слайдшоу. Как сделать? Берем длинное изображение, начальная и конечная части которого идентичны. Затем анимируем изменение положения картинки слева, пока оно не завершит полный цикл (то есть, передвинется достаточно далеко вправо), а затем быстро возвращаем все в исходную позицию и начинаем сначала. Идея слайдшоу на CSS Нам нужен только внешний контейнер с относительным позиционированием и скрытием того, что выступает за границы. Также понадобится внутренний контейнер, в котором будет происходить анимация. 1 <div class="slideshow"> 2 <div class="images"> 3 Изображения слайд шоу размещаются здесь 4 </div> 5 </div> А код CSS будет выглядеть следующим образом: 01 .slideshow { 02 position: relative; 03 overflow: hidden; 04 } 05 .images { 06 background: url(slideshow.jpg); 07 position: absolute; 08 left: 0; 09 top: 0; 10 height: 100%; 11 width: 300%; 12 -webkit-animation: slideshow 10s linear infinite; 13 -moz-animation: slideshow 10s linear infinite; 14 } 15 @-webkit-keyframes slideshow { 16 0% { left: 0; } 17 100% { left: -200%; } 18 } 19 @moz-keyframes slideshow { 20 0% { left: 0; } 21 100% { left: -200%; } 22 } Улучшаем производительность кода Приведенный выше код должен работать нормально, но мы можем улучшить производительность (по крайней мере, в браузерах семейства WebKit / Mobile WebKit) указав браузеру, что мы собираемся использовать 3D трансформации (даже если мы их и не будем применять) и задействуем translateX вместо left. 01 <strong></strong>.images { 02 ... 03 04 /* Указываем браузеру на то, что нужно использовать GPU */ 05 -webkit-transform: translate3d(0, 0, 0); 06 } 07 08 @-webkit-keyframes moveSlideshow { 09 0% { 10 -webkit-transform: translateX(0); 11 } 12 100% { 13 -webkit-transform: translateX(-200%); 14 } 15 } 16 @-moz-keyframes moveSlideshow { 17 0% { 18 -moz-transform: translateX(0); 19 } 20 100% { 21 -moz-transform: translateX(-200%); 22 } 23 } Улучшаем интерфейс Добавим к нашему слайдшоу два эффекта. При наведении курсора мыши на изображение будет: Увеличиваться скорость проигрывания слайдов. Изображение будет становиться цветным. Очевидный метод ускорения - уменьшение времени анимации: 1 .slideshow:hover .images { 2 -webkit-animation-duration: 5s; 3 -moz-animation-duration: 5s; 4 } Но такой метод приведет к появлению рывков! Изменяя время анимации мы устанавливаем новую временную шкалу для процесса изменения свойств. Браузер воспринимает новые значения и перескакивает на них немедленно. Получается не плавное ускорение, а рывок. Будем использовать концепцию "ускорения". Если установить два слайдшоу, одно поверх другого, и каждое движется со своей скоростью, а затем скрывать/ показывать самое быстрое при наведении курсора мыши, то получится отличный эффект ускорения. Мы будем использовать трансформации, чтобы сделать переход плавным. 1 <div class="slideshow"> 2 <div class="images-1"> 3 Изображения слайд шоу размещаются здесь 4 </div> 5 <div class="images-2"> 6 </div> 7 </div> А CSS код будет следующим: 01 .slideshow > div { 02 ... 03 04 -moz-transition: opacity 0.5s ease-out; 05 -o-transition: opacity 0.5s ease-out; 06 -webkit-transition: opacity 0.5s ease-out; 07 -ms-transition: opacity 0.5s ease-out; 08 09 /* Медленная часть*/ 10 -webkit-animation: moveSlideshow 60s linear infinite; 11 -moz-animation: moveSlideshow 60s linear infinite; 12 13 ... 14 } 15 16 .images-1 { 17 /* Быстрая часть*/ 18 -webkit-animation: moveSlideshow 20s linear infinite; 19 -moz-animation: moveSlideshow 20s linear infinite; 20 } 21 22 .slideshow:hover .images-2 { 23 opacity: 0; 24 } Черно-белый медленный вариант будет размещаться сверху, а цветной быстрый - снизу. Для сокращения числа запросов HTTP поместим оба варианта в один файл и будем только сдвигать позицию фона. 1 .images-1 { 2 /* Спрайт */ 3 background-position: 0 200px; 4 5 ... 6 } Спрайт для галереи