CSS: Scrollen Diashow nicht zu wiederholen

Question

ich ein langes Bild, das ich auf dem Bildschirm mit einem Scroll-Effekt gleiten möge, wie auf der Webseite des Apple TV (das Floating/Scroll-Film bedeckt):

das ist das Markup ich benutze:

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

     </div> 
    </div> 

und dies ist die 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); 

} 

hier ist die CSS-Animation:

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

}

kommt es, dass die Diashow Scrollen wird aber nur einmal und es rollt bald aus dem Bildschirm, nachdem das gesamte Bild gescrollt wird (und auch mit einem Teil von Anfang an!) ..

das Bild:

bitte helfen

Answer 1

meinen Sie so etwas?

@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

Ich bin nicht vertraut mit dem Apple TV Effekt Sie Referenzierung, aber wenn man es in einer Schleife wollen immer und immer Sie benötigen einen zusätzlichen Keyframe bei 0% mit translateX hinzufügen (0); und verwende dann die Breite des Bildes in deinem @ 100% translateX();

Wenn Sie also ein 2000px Bild der Animation haben würde wie folgt aussehen:

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

hier ein Stift ist: http://codepen.io/NeilWkz/pen/wWMzwe (HINWEIS: Ich schaltete Auto-prefixer wie Sie Code in alles kaputt war, aber Chrom!)