如何避免此 CSS3 背景循环跳转

Question

我最近一直在尝试一些css3。我想做的是制作一个背景图像向左滑动并无缝重复，以产生无限背景动画的效果（有点像他们在旧卡通中做背景的方式，它只是一遍又一遍地循环......我在这个 css3 上面临的问题是，一旦动画完成，它就会弹回它的起始位置。看这里：我的博客。标题为"超级蛞蝓"的条目的背景将在动画完成后恢复到位。我一直在通过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从0 x方向动画化到实际上等于其宽度负的位置（在本例中为-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 ） demo.

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