35

为什么这不起作用？我究竟做错了什么？

CSS

@-webkit-keyframes test {
  0% {
    background-image: url('frame-01.png');
  }
  20% {
    background-image: url('frame-02.png');
  }
  40% {
    background-image: url('frame-03.png');
  }
  60% {
    background-image: url('frame-04.png');
  }
  80% {
    background-image: url('frame-05.png');
  }
  100% {
    background-image: url('frame-06.png');
  }
}

div {
  float: left;
  width: 200px;
  height: 200px;
  -webkit-animation-name: test;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: linear;
}

演示

http://jsfiddle.net/hAGKv/

提前致谢！

4

13 回答 13

31

2020 年更新：是的，可以做到！方法如下。

片段演示：

#mydiv{ animation: changeBg 1s infinite; width:143px; height:100px; }
@keyframes changeBg{
   0%,100%  {background-image: url("https://i.stack.imgur.com/YdrqG.png");}
   25% {background-image: url("https://i.stack.imgur.com/2wKWi.png");}
   50% {background-image: url("https://i.stack.imgur.com/HobHO.png");}
   75% {background-image: url("https://i.stack.imgur.com/3hiHO.png");}
}
<div id='mydiv'></div>

背景图像 [不是可以动画的属性][1] - 您不能对属性进行补间。

原始答案：（仍然是一个不错的选择）相反，尝试使用 position:absolute 将所有图像放在彼此的顶部，然后将所有图像的不透明度设置为 0，除了您重复想要的那个。

于 2011-09-06T11:56:01.100 回答
8

它适用于 Chrome 19.0.1084.41 测试版！

所以在未来的某个时候，关键帧可能真的是……帧！

你生活在未来;)

于 2012-05-12T21:13:58.373 回答
5

为我工作。注意使用background-image进行过渡。

#poster-img {
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
}
于 2017-02-02T15:57:31.240 回答
4

这真的又快又脏，但它完成了工作：jsFiddle

    #img1, #img2, #img3, #img4 {
    width:100%;
    height:100%;
    position:fixed;
    z-index:-1;
    animation-name: test;
    animation-duration: 5s;
    opacity:0;
}
#img2 {
    animation-delay:5s;
    -webkit-animation-delay:5s
}
#img3 {
    animation-delay:10s;
    -webkit-animation-delay:10s
}
#img4 {
    animation-delay:15s;
    -webkit-animation-delay:15s
}

@-webkit-keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}
@keyframes test {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
    }
}

我正在使用 jQuery 为我的网站做类似的事情，但是当用户向下滚动页面时触发转换 - jsFiddle

于 2013-03-25T17:07:53.820 回答
3

我需要做和你一样的事情并回答你的问题。我最终找到了我从这里读到的步骤功能。

我的解决方案的 JSFiddle（注意它目前在 Firefox 中工作，我会让你添加跨浏览器行，试图保持解决方案整洁）

首先，我创建了一个有两个框架的精灵表。然后我创建了 div 并将其作为背景，但我的 div 只是我的精灵的大小（100px）。

<div id="cyclist"></div>

#cyclist {
    animation: cyclist 1s infinite steps(2);
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/cyclist-test.png');
    background-repeat: no-repeat;
    background-position: top left;
  }

动画设置为 2 个步骤，整个过程需要 1 秒。

@keyframes cyclist {
  0% {
    background-position: 0 0; 
   }
  100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px
   }
}

上面的蒂亚戈提到了步骤功能，但我想我会详细说明它。非常简单和很棒的东西。

于 2014-12-17T20:59:14.117 回答
2

计时功能将linear线性地为定义的属性设置动画。对于背景图像，它似乎在更改动画帧时具有这种淡入淡出/调整大小的效果（不确定这是否是标准行为，我会采用@Chukie B 的方法）。

如果您使用该steps功能，它将离散地设置动画。有关详细信息，请参阅MDN上的计时功能文档。对于你的情况，这样做：

-webkit-animation-timing-function: steps(1,end);
animation-timing-function: steps(1,end);

看到这个jsFiddle。

我也不确定这是否是标准行为，但是当您说只有一步时，它允许您更改该@keyframes部分的起点。这样您就可以定义动画的每一帧。

于 2013-05-21T20:21:20.570 回答
2

您的代码可以很好地适应一些调整：

div {
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  animation: animateSectionBackground infinite 240s;
}

@keyframes animateSectionBackground {
  00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
  12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
  25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
  37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
  50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
  62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
  75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
  87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}

以下是适合您情况的百分比说明：

首先，您需要计算“块”。如果你有 8 个不同的背景，你需要做：100% / 8 = 12.5%（为了简化你可以放小数）=> 12%

之后，您将获得：

@keyframes animateSectionBackground {
  00% { background-image: url(/assets/images/bg-1.jpg); }
  12% { background-image: url(/assets/images/bg-2.jpg); }
  25% { background-image: url(/assets/images/bg-3.jpg); }
  37% { background-image: url(/assets/images/bg-4.jpg); }
  50% { background-image: url(/assets/images/bg-5.jpg); }
  62% { background-image: url(/assets/images/bg-6.jpg); }
  75% { background-image: url(/assets/images/bg-7.jpg); }
  87% { background-image: url(/assets/images/bg-8.jpg); }
}

如果您执行此代码，您将看到转换将是永久的。如果你想让背景保持固定一段时间，你可以这样做：

@keyframes animateSectionBackground {
  00%, 11% { background-image: url(/assets/images/bg-1.jpg); }
  12%, 24% { background-image: url(/assets/images/bg-2.jpg); }
  25%, 36% { background-image: url(/assets/images/bg-3.jpg); }
  37%, 49% { background-image: url(/assets/images/bg-4.jpg); }
  50%, 61% { background-image: url(/assets/images/bg-5.jpg); }
  62%, 74% { background-image: url(/assets/images/bg-6.jpg); }
  75%, 86% { background-image: url(/assets/images/bg-7.jpg); }
  87%, 99% { background-image: url(/assets/images/bg-8.jpg); }
}

这意味着你想要：

  • bg-1 保持固定从 00% 到 11%
  • bg-2 从 12% 保持固定到 24%
  • ETC

通过放置 11%，转换持续时间将为 1% (12% - 11% = 1%)。240 秒的 1%（总持续时间）=> 2.4 秒。

您可以根据自己的需要进行调整。

于 2020-07-27T08:54:44.907 回答
1

如上所述，您不能更改动画中的背景图像。我发现最好的解决方案是将您的图像放入一个精灵表中，然后通过更改背景位置来制作动画，但如果您正在为移动设备构建，您的精灵表限制为小于 1900x1900 像素。

于 2011-10-06T18:59:16.343 回答
0

您可以使用动画背景位置属性和精灵图像。

于 2014-05-22T16:58:18.530 回答
0

您可以遵循以下代码：

#cd{
  position: relative;
  margin: 0 auto;
  height: 281px;
  width: 450px;
}
#cf img{
  left: 0;
  position: absolute;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#cf img.top:hover{
  opacity: 0;
}
<div id="cf">
  <img class="button" src="Birdman.jpg" />
  <img src="Turtle.jpg" class="top" />
</div>

于 2012-12-28T05:26:15.760 回答
0

我最近需要做同样的事情。这是一个简单的实现

#wrapper { width:100%; height:100%; position:relative; }
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; }
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; }
@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}
<div id="wrapper">
  <img src="img1.jpg" class="top" style="z-index:2;">
  <img src="img2.jpg" style="z-index:1;">
</div>

于 2015-10-22T04:15:46.257 回答
0

您可以使用 jquery-backstretch 图像，它允许动画幻灯片作为您的背景图像！

https://github.com/jquery-backstretch/jquery-backstretch 向下滚动到设置，所有文档都在那里。

于 2020-05-17T10:21:47.363 回答
-1

好吧，我可以用 chrome 更改它们。它使用 -webkit css 属性在 Chrome 中简单且运行良好。

于 2012-11-06T10:37:28.577 回答