Animation webkit css3动画循环

我制作了一个从左到右的动画背景。一切正常，但当背景图像到达右侧时，动画将重新开始

如何使其连续运行，使其看起来总是从左向右移动（无中断）？

以下是仅在webkit浏览器中可用的fiddle链接：

---

我认为使用比你需要的更大的图像进行“旋转”可能会产生类似的效果。。看

---

它不是严格地从左/右看，因此它取决于您的实际图像，如果该图像看起来正常，则不能。CSS正在做它应该做的事情（无限重复），但是图像本身不是连续的。您需要的是最后一帧与其第一帧相同的图像，以便动画结束时，它看起来好像从未停止过

您可以通过制作超长图像并沿其轴旋转图像来实现此效果，但此效果在某些图像上效果更好。大概是这样的：

在任何情况下，结果如下：

---

我们确实喜欢在开始和结束时使用同一帧的想法，但只需将其复制两次并使用更长的动画就容易多了。这将运行8分钟

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}

然后在你的元素上：

animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;

---

我用了pixlr。在图像编辑器中打开它，您可以看到我所做的：div的大小是575，因此我需要第一个575px与最后一个575px相同。所以我制作了一张1725年的图像，在“中间”575px中我使用了图像的翻转版本。

@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -4000px 0; }
}

animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;