Come far scorrere continuamente l'immagine di sfondo in orizzontale senza interrompere l'animazione?

Question

Sto provando a creare un banner che scorre di lato infinitamente con l'animazione css3. Il problema è che dopo che l'animazione è finita ha un taglio brusco quando si riavvia. Sto cercando di capire come prevenire quella dura animazione.

Ho messo il mio codice qui.

@keyframes slideleft { 
 
from{background-position: right;} 
 
to {background-position: left;} 
 
} 
 

 
@-webkit-keyframes slideleft { 
 
from{background-position: right;} 
 
to {background-position: left;} 
 
} 
 

 
#masthead { 
 
background-image: url('http://static.communitytable.parade.com/wp-content/uploads/2014/06/dogs-in-world-cup-jerseys-ftr.jpg'); 
 
animation: slideleft 5s infinite ease-in-out; 
 
-webkit-animation: slideleft 5s infinite ease-in-out; 
 
width: 100%; 
 
height: 1200px; 
 
}

<div id="masthead"></div>

Answer 1

Javascript sarebbe probabilmente un modo migliore per gestire questa situazione. Anche se in CSS, è possibile ripetere l'immagine di sfondo ed estendere la posizione di sfondo e la durata dell'animazione ad un numero molto alto. Ecco un fiddle.

@keyframes slideleft { 
    from { background-position: 0%; } 
    to { background-position: 90000%; } 
} 

#masthead { 
    background-repeat: repeat-x; 
    ... 
    animation: slideleft 600s infinite linear; 
} 

Se si utilizza jQuery sarebbe abbastanza semplice:

(function animateBG() { 
    $('#masthead').animate({ 
     backgroundPosition: '+=5' 
    }, 12, animateBG); 
})();