एनीमेशन में ब्रेक के बिना पृष्ठभूमि-छवि स्क्रॉल को लगातार क्षैतिज रूप से कैसे बनाएं?

Question

मैं एक बैनर बनाने की कोशिश कर रहा हूं जो सीएसएस 3 एनीमेशन के साथ असीमित रूप से स्क्रॉल करता है। समस्या यह है कि एनीमेशन खत्म होने के बाद इसे फिर से शुरू होने पर कठोर कटौती होती है। मैं यह समझने की कोशिश कर रहा हूं कि उस कठोर एनीमेशन को कैसे रोकें।

मैंने अपना कोड यहां दिया है।

@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

जावास्क्रिप्ट शायद इस संभाल करने के लिए एक बेहतर तरीका होगा। हालांकि सीएसएस में, आप पृष्ठभूमि छवि दोहरा सकते हैं और पृष्ठभूमि-स्थिति और एनीमेशन अवधि को बहुत अधिक संख्या में बढ़ा सकते हैं। यहां एक 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); 
})();