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

应该可以解决这个问题 :)