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%; }
    }

应该做的把戏:)