webkit css3 动画循环答案

【问题标题】：webkit css3 animation loopwebkit css3 动画循环
【发布时间】：2011-09-11 11:34:54
【问题描述】：

我制作了一个从左到右的动画背景。一切正常，但是当背景图像正确时，动画会重新开始。

我怎样才能让它连续运行，使它看起来总是从左到右移动（没有中断）？

这里的小提琴链接仅适用于 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;
}

【问题讨论】：

标签： animation google-chrome css webkit

【解决方案1】：

使用该图像，您不能。 CSS 正在做它应该做的事情（无限重复），但图像本身不是连续的。您需要的是最后一帧与第一帧相同的图像，这样当动画结束时，它就好像从未停止过一样。

您可以通过制作超长图像并沿其轴旋转图像来实现此效果，但此效果在某些图像上的效果要好于其他图像。像这样的：

无论如何，结果如下：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;
}

【讨论】：

我使用了 pixlr。在图像编辑器中打开它，你可以看到我所做的：div 的大小是 575，所以我需要前 575px 与最后 575px 相同。所以我制作了一个 1725 的图像，在“中间”575px 中我使用了图像的翻转版本。
如果你去掉 -webkit 前缀，it works in Firefox too。

【解决方案2】：

我认为使用比您需要的更大的图像“旋转”可能会产生类似的效果。请参阅this page for an explanation and demo

它不会严格从左/右，所以如果它看起来不错，它将取决于你的实际图像

【讨论】：

【解决方案3】：

我们确实喜欢在开始和结束时使用同一帧的想法，但只需将其复制 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; }
}

然后在你的元素上：

animation: animatedBackground 480s linear;
-moz-animation: animatedBackground 480s linear;
-webkit-animation: animatedBackground 480s linear;
-ms-animation: animatedBackground 480s linear;
-o-animation: animatedBackground 480s linear;

【讨论】：