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

应该做的伎俩：）

CSS3跳跃位置

1 个答案: