webkit css3动画循环 [英] webkit css3 animation loop

问题描述

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

我如何让它连续运行，以使它看起来总是从左到右行驶（没有休息）？ >

这里的小提琴链接仅适用于webkit浏览器：

  @  -  webkit-keyframes slide {
从{
 background-position：1725px; 
} 
到{
 background-position：575px; 
} 
} 
 
 #logo {
 width：575px; 
 height：200px; 
 background：url（http://f.cl.ly/items/0g3q1A203t2A2m182i1k/newbg.png）; 
 -webkit-animation：slide 10s linear infinite; 
} 
  

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屋！