Wie wird das Hintergrundbild horizontal ohne Animation unterbrochen?

Question

Ich versuche, ein Banner, das seitwärts mit css3 Animation unendlich scrollt. Das Problem ist, dass es nach dem Ende der Animation einen harten Schnitt hat, wenn es neu gestartet wird. Ich versuche herauszufinden, wie ich diese harte Animation verhindern kann.

Ich habe meinen Code hier.

@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 wäre wahrscheinlich ein besserer Weg, dies zu umgehen. In CSS konnten Sie das Hintergrundbild jedoch wiederholen und die Hintergrundposition und Animationsdauer auf eine sehr hohe Zahl erweitern. Hier ist ein fiddle.

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

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

Wenn Sie jQuery verwenden es ziemlich einfach sein würde:

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