如何让背景图像连续水平滚动而不中断动画？

Question

我正试图制作一个横幅无限滚动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>

Answer 1

的JavaScript可能会是一个更好的方式来处理这个问题。尽管在CSS中，您可以重复背景图片并将背景位置和动画持续时间延长到很高的数字。这是一个fiddle。

@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); 
})();