How to make the background image scroll continuously horizontally without interruption in the animation?

Question

I am trying to create a banner that scrolls endlessly with css3 animation. The problem is that after the animation finishes, it cuts sharply when restarting. I am trying to figure out how to prevent this harsh animation.

I have posted my code here.

@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 will probably be the best way to handle this. Although in CSS you can repeat the background image and extend the background position and duration of the animation to a very large number. Here is the fiddle .

 @keyframes slideleft { from { background-position: 0%; } to { background-position: 90000%; } } #masthead { background-repeat: repeat-x; ... animation: slideleft 600s infinite linear; } 

If you use jQuery, it will be pretty simple:

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