如何避免CSS3背景循环跳动？

Question

如何避免CSS3背景循环跳动？

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 轴重复，背景本身是无缝的，然而当进行动画处理时，过渡会非常快，我想让它无缝或者对用户来说不可见。

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

- Digital Brent

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Thomas · Accepted Answer

我想到的最简单的解决方案是通过将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浏览器前缀)演示。

在Chromium 18中，这似乎运行良好。希望您不介意我在演示中使用您的实际图片，但我没有适合测试的图片。