CSS webkit css3 动画循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6289507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
webkit css3 animation loop
提问by SRN
I made a background to animate from left to right. Everything works fine but when background-image reaches right, the animation starts over again.
我制作了一个从左到右动画的背景。一切正常，但是当 background-image 到达正确的位置时，动画会重新开始。
How can i make it to run continuously so that it appears it is traveling from left to right always (no breaks)?
我怎样才能让它连续运行，使它看起来总是从左到右移动（没有中断）？
Here is the fiddle link works only in webkit browsers:
http://jsfiddle.net/Tu95Y/750/
这是小提琴链接仅适用于 webkit 浏览器：http:
//jsfiddle.net/Tu95Y/750/
@-webkit-keyframes slide {
from{
background:left;
}
to{
background:right;
}
}
#logo{
width:300px;
height:200px;
background:url(http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg);
-webkit-animation: slide 5s linear infinite;
}
回答by Jeff
With that image, you can't. The CSS is doing what it's supposed to (repeating infinitely), but the image itself is not continuous. What you need is an image whose last frame is identical to its first, so that when the animation ends, it appears as if it never stopped.
用那个图像，你不能。CSS 正在做它应该做的事情（无限重复），但图像本身并不连续。您需要的是最后一帧与第一帧相同的图像，这样当动画结束时，它看起来就好像从未停止过一样。
You can achieve this effect by making an extra-long image and rotating the image along its axis, but this effect works better on some images than others. Something like this:
您可以通过制作超长图像并沿其轴旋转图像来实现此效果，但此效果在某些图像上比其他图像效果更好。像这样的东西：
In any case, here is the result: http://jsfiddle.net/Tu95Y/751/
无论如何，这是结果：http: //jsfiddle.net/Tu95Y/751/
@-webkit-keyframes slide {
from{
background-position:1725px;
}
to{
background-position:575px;
}
}
#logo{
width:575px;
height:200px;
background:url(http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png);
-webkit-animation: slide 10s linear infinite;
}
回答by clairesuzy
I think something along the lines of "rotate" using a bigger image than you need might should create a similar effect.. see this page for an explanation and demo
我认为使用比您需要的更大的图像“旋转”的东西可能会产生类似的效果.. 请参阅此页面以获取解释和演示
it won't strictly be from left/right so it will depend on your actual image if it looks OK
它不会严格来自左/右，因此如果看起来不错，它将取决于您的实际图像
回答by Kevin Parker
We did like the idea of the same frame at the begnning and end, but it was much easier just to duplicate it 2 times and user a longer animation. This will run for 8 minutes.
我们确实喜欢在开始和结束时使用同一帧的想法，但是只需将其复制 2 次并使用更长的动画就容易多了。这将运行 8 分钟。
@keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
@-moz-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
@-webkit-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
@-ms-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
@-o-keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -4000px 0; }
}
Then on your element:
然后在你的元素上：
animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;
