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

在中间添加另一个完整位置的关键帧(假设你想让bg回到原来的位置，如果不这样做，就把它设置为-4000px)

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

应该可以:)