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

Question

我最近一直在尝试一些 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 轴重复，背景本身是无缝的，但是当动画转换时，过渡是一个快速的快照，我希望它是无缝的，或者我应该说用户不会注意到。

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

Answer 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 中可以正常工作。希望您不介意我在演示中使用您的实际图像，但我没有任何合适的图像可供测试。