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.Come far scorrere continuamente l'immagine di sfondo in orizzontale senza interrompere l'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>
In definitiva, vorrei limitare l'usuage javascript perché il tempo di caricamento della pagina è già elevata. Non sono contrario però. – NinjaCoder