WebKit的CSS3动画循环 [英] webkit css3 animation loop

问题描述

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

我怎样才能让这样看来它是从左至右总是前往其连续运行（不休息）？

下面是小提琴链接仅在WebKit浏览器：结果
http://jsfiddle.net/Tu95Y/750/

  @  -  WebKit的关键帧幻灯片{
    从{
        背景：左;
    }
    至{
        背景：权利;
    }
}#logo {
    宽度：300像素;
    高度：200像素;
    背景：网址（http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg）;
    -webkit-动画：幻灯片5S线性无穷;
}
 

解决方案

通过这个形象，你不能。该CSS是做什么它应该（重复无限），但图像本身是不连续的。你需要的是一个图像的最后一帧等同于它的第一个，这样，当动画结束，它看起来好像它从来没有停止过。

您可以通过一个超长的图像和图像沿其轴线旋转达到这种效果，但这种影响效果会更好一些图像比其他人。事情是这样的：

在任何情况下，这里是结果： http://jsfiddle.net/Tu95Y/751/

  @  -  WebKit的关键帧幻灯片{
  从{
      背景位置：1725px;
  }
  至{
      背景位置：575px;
  }
}#logo {
  宽度：575px;
  高度：200像素;
  背景：网址（http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png）;
  -webkit-动画：幻灯片10S线性无穷;
}
 

I made a background to animate from left to right. Everything works fine but when background-image reaches right, the animation starts over again.

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-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;
}

解决方案

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.

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/

@-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;
}

这篇关于WebKit的CSS3动画循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！