CSS3 跳跃位置答案

【问题标题】：CSS3 Jumping PositionCSS3 跳跃位置
【发布时间】：2011-11-11 17:12:01
【问题描述】：

所以我实现了一个 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 秒后跳回到开头。如果我调整了持续时间，这只会减慢滚动速度，然后在持续时间之后跳转。

您还知道如何通过悬停事件暂停动画吗？

谢谢

【问题讨论】：

标签： html animation css

【解决方案1】：

只需在中间添加另一个具有完整位置的关键帧（假设您希望背景返回到它的来源，如果不只是将其设置为 -4000px）

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

应该做的伎俩:)

【讨论】：

这很好，但我希望图像无限重复地向左滚动。您的代码只会从左到右弹跳，不是吗？感谢您的帮助
是的，但是如果您将最后一个关键帧更改为 -4000 像素，它将重置为第一个位置，然后再次滚动（我希望如此）。