CSS3跳躍位置

Question

因此，我實現了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秒后跳回開始。 如果我調整了持續時間，這只會減慢滾動速度，然后在持續時間之后跳轉。

您還知道我如何通過懸停事件暫停動畫嗎？

謝謝

Answer 1

只需在中間以完整位置添加另一個關鍵幀（假設您想讓背景色回到它的來源，如果不只是將其設置為-4000px的話）

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

應該做的把戲:)