3

我最近一直在尝试一些css3。我想要做的是让背景图像向左滑动并无缝重复以产生无限背景动画的效果（有点像他们在旧卡通中做背景的方式，它只是一遍又一遍地循环......）。我在使用这个 css3 时面临的问题是，一旦动画完成，它就会重新回到它的起始位置。见这里：我的博客。动画完成后，标题为“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 轴重复，背景本身是无缝的，但是当动画过渡时，过渡是一个快速的快照，我希望它是无缝的，或者我应该说它对用户来说是不明显的。

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

4

1 回答 1

3

我想出的最简单的解决方案是简单地在 from 到一个位置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）演示。

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

于 2012-08-12T23:40:30.623 回答