CSS: прокрутка слайдов не повторяющуюся

Question

У меня есть длинный образ, который я хочу, чтобы скользить на экране с прокруткой эффекта, как на веб-странице Apple TV (в/прокрутка фильм плавающей крышки):

это разметка я использую:

<div class="header"> 
     <div class="slider"> 

     </div> 
    </div> 

и это CSS:

.header{ 
    height: 610px; 
    width: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

.header .slider{ 
    height: 540px; 
    background: url("../images/header.jpg"); 
    position: relative; 
    border-left: 10px rgb(34,34,34) solid; 
    border-bottom: 10px rgb(34,34,34) solid; 
    border-right: 10px rgb(34,34,34) solid; 
    left: 0; 
    top: 60px; 
    width: 450%; 
    animation: moveSlideshow 40s linear infinite; 
    -webkit-animation: moveSlideshow 40s linear infinite; 
    -moz-animation: moveSlideshow 40s linear infinite; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 

} 

вот CSS анимация:

@keyframes moveSlideshow { 
100% { 
    -webkit-transform: translateX(-300%); 
} 

}

это происходит, что слайд-шоу прокрутки, но только один раз, и вскоре прокручивает из экрана после того, как все изображение прокручивается (а также с некоторой частью самого начала!) ..

изображение:

пожалуйста, помогите

Answer 1

ли Вы имеете в виду что-то вроде этого?

@keyframes slide-banner { 
 
    0% {background-position: 0 0;} 
 
    100% {background-position: -300px 0;} 
 
} 
 
@-webkit-keyframes slide-banner { 
 
    0% {background-position: 0 0;} 
 
    100% {background-position: -300px 0;} 
 
} 
 
@-o-keyframes slide-banner { 
 
    0% {background-position: 0 0;} 
 
    100% {background-position: -300px 0;} 
 
} 
 
@-moz-keyframes slide-banner { 
 
    0% {background-position: 0 0;} 
 
    100% {background-position: -300px 0;} 
 
} 
 
.slide-banner {display: block; width:100%; height:100px; animation: slide-banner 2s infinite linear; -webkit-animation: slide-banner 2s infinite linear; -ms-animation: slide-banner 2s infinite linear; -moz-animation: slide-banner 2s infinite linear; -o-animation: slide-banner 2s infinite linear;}

<div class="slide-banner" style="background-image: url(http://www.javatpoint.com/images/javascript/javascript_logo.png);background-repeat: repeat;"></div>

Answer 2

Я не знаком с Apple TV эффект, который вы ссылаетесь, но если вы хотите, чтобы петли снова и вам нужно добавить дополнительный ключевой кадр @ 0% с translateX (0); а затем используйте ширину изображения в @ 100% translateX();

Так что если у вас есть 2000px изображение ваша анимация будет выглядеть следующим образом:

@keyframes moveSlideshow { 
    0% { 
     transform: translateX(0); 
    } 
    100% { 
    transform: translateX(-2000px); 
    } 
} 

Вот ручка: http://codepen.io/NeilWkz/pen/wWMzwe (Примечание: я включил авто-prefixer, как вы код был разорен во всем, кроме хрома!)