Как сделать фон-изображение прокрутки непрерывно по горизонтали без перерыва в анимации?

Я пытаюсь сделать баннер, который прокручивается в сторону бесконечно с анимацией css3. Проблема в том, что после завершения анимации он имеет резкий разрез при перезапуске. Я пытаюсь понять, как предотвратить эту жесткую анимацию.

Я положил свой код здесь. 

@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>
8
css css-animations css3 html

1 ответов

Javascript, вероятно, был бы лучшим способом справиться с этим. Хотя в CSS вы можете повторить фоновое изображение и расширить продолжительность фона и анимации до очень большого числа. Вот это скрипка.

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

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

Если вы используете jQuery, это будет довольно просто:

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