CSS3跳位置

所以，我實現了一個CSS3過渡使用此代碼CSS3跳位置

animation-name:scrolling; 
    animation-duration: 20s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 

    @keyframes scrolling 
    {  
     0% { background-position: 0% 0%; } 
     100% { background-position: -2000px 0%; } 
    }

做工精細滾動在屏幕寬屏圖像，但20秒後它跳回到起點，沒有任何一個有任何想法如何我可以連續滾動它，而不會在20多歲後跳回到開始。如果我調整了持續時間，這隻會減慢滾動速度，然後在持續時間後跳躍。

也你知道我可以用懸停事件暫停動畫嗎？

感謝

來源

2011-11-11 Jamie Hunt

正好與滿倉的中間添加另一個關鍵幀（假設你想要的BG回到它原來的地方離，如果不只是將其設置爲-4000px）

@keyframes scrolling 
    {  
     0% { background-position: 0% 0%; } 
     50% { background-position: -2000px 0%; } 
     100% { background-position: 0% 0%; } 
    }

應該做的訣竅:)

來源

2011-11-11 08:16:42 Kyle

這很好，但我希望圖像重複無限滾動左邊。你的代碼只會從左到右反彈不是嗎？感謝您的幫助，雖然 –

是的，但如果您將最後一個關鍵幀更改爲-4000像素，它將重置爲第一個位置，然後再次滾動（我希望）。 – Kyle

回答

相關問題