如何讓背景圖像連續水平滾動而不中斷動畫？

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