webkit css3 动画循环

Posted 2023-03-06

【中文标题】webkit css3 动画循环

【英文标题】：webkit css3 animation loop

【发布时间】：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;

【参考方案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;