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设置为实际上宽度为负的位置（在本例中为{{ 1}}）：

-1000px

JS Fiddle (Webkit-vendor-prefix only) demo

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

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

1 个答案: