背景画像をアニメーションの途切れなく連続して水平方向に連続してスクロールする方法はありますか？

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