我怎样才能避免这个css3背景循环跳转？

Posted 2023-03-06

【中文标题】我怎样才能避免这个css3背景循环跳转？

【英文标题】：how can I avoid this css3 background loop jump?

【发布时间】：2012-08-09 05:30:31

【问题描述】：

我最近一直在尝试一些 css3。我正在尝试做的是让背景图像向左滑动并无缝重复以提供无限背景动画的效果（有点像他们在旧卡通中制作背景的方式，它只是一遍又一遍地循环......）。我在使用这个 css3 时面临的问题是，一旦动画完成，它就会重新回到它的起始位置。见这里：my blog。动画完成后，标题为“super sluggy”的条目的背景将恢复原位。我一直在寻找 w3schools 的答案，以及谷歌甚至相关的堆栈问题，但我无法在任何地方找到解决方案。这是我的代码：

@keyframes l_2_r

from background-position: top left;
to background-position: top right;


@-moz-keyframes l_2_r

from background-position: top left;
to background-position: top right;


@-webkit-keyframes l_2_r

from background-position: top left;
to background-position: top right;


@-o-keyframes l_2_r

from background-position: top left;
to background-position: top right;


#sluggy_div
background: url('../imgs/sluggy-bg.jpg') repeat-x;
animation: l_2_r 7s linear infinite;
-moz-animation: l_2_r 7s linear infinite;
-webkit-animation: l_2_r 7s linear infinite;
-o-animation: l_2_r 7s linear infinite;

如果沿 x 轴重复，背景本身是无缝的，但是当动画转换时，过渡是一个快速的快照，我希望它是无缝的，或者我应该说用户不会注意到。

有谁知道如何解决这个问题？谢谢！

【参考方案1】：

我想出的最简单的解决方案是简单地将background-position 沿x 方向从0 设置为实际上是其宽度负数的位置（在本例中为-1000px）：

@-webkit-keyframes l_2_r 
    from background-position: 0 0;
    to background-position: -1000px 0;


#sluggy 
    width: 560px;
    height: 374px;
    border: 1px solid #f90; /* just for visibility */
    background-image: url(http://digitalbrent.com/imgs/sluggy-bg.jpg);
    -webkit-animation: l_2_r 7s linear infinite;
​

JS Fiddle (Webkit-vendor-prefix only) demo.

这似乎在 Chromium 18 中可以正常工作。希望您不介意我在演示中使用您的实际图像，但我没有任何合适的图像可供测试。

【讨论】：

我一点也不介意。感谢您的帮助，我不敢相信我没有想到这一点......现在看起来很明显。

哦，不客气！别担心，我花了比我愿意承认的时间更长的时间来考虑它... =)

如果你还有相关的图片，你能把它们上传到imgur吗？这样我就可以让我的答案再次有意义（并且仍然展示一个有用的演示）。