使用CSS3动画更改背景图像

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

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

演示

---

提前谢谢

2020年更新：是的，可以做到如何

片段演示：

#mydiv{动画：changeBg 1s无限；宽度：143px；高度：100px；}
@关键帧更改bg{
0%，100%{背景图像：url（“https://i.stack.imgur.com/YdrqG.png");}
25%{背景图像：url（“https://i.stack.imgur.com/2wKWi.png");}
50%{背景图像：url（“https://i.stack.imgur.com/HobHO.png");}
75%{背景图像：url（“https://i.stack.imgur.com/3hiHO.png");}
}

---

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

它在Chrome 19.0.1084.41 beta版中工作

所以在将来的某个时候，关键帧可能真的是。。。框架

---

你生活在未来；）

我可以用chrome来更换它们。使用-webkit css属性在Chrome中操作简单，效果良好。

您可以按照以下代码操作：

#cd{
位置：相对位置；
保证金：0自动；
高度：281px；
宽度：450px；
}
#cf img{
左：0；
位置：绝对位置；
-moz过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
#cf img.top：悬停{
不透明度：0；
}

---

这真是又快又脏，但它完成了任务：

---

我正在使用jQuery为我的站点做类似的工作，但是当用户向下滚动页面时会触发转换-

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

如果使用

步骤

功能，它将离散地设置动画。有关更多详细信息，请参阅上的定时功能文档。对于您的情况，请执行以下操作：

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

看这个

---

我不确定这是否是标准行为，但当您说只有一个步骤时，它允许您更改

@keyframes

部分中的起点。通过这种方式，您可以定义动画的每一帧。

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

我需要做与您相同的事情，并回答了您的问题。我最终找到了我从中读到的关于steps函数的发现

（请注意，它目前在Firefox中工作，我将允许您添加交叉浏览器行，以保持解决方案干净整洁）

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

---

但我想我应该详细说明一下。非常简单而且很棒的东西。

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

#包装{宽度：100%；高度：100%；位置：相对；}
#包装器img{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：自动；显示：块；}
#top{动画：淡出2s缓入淡出；动画填充模式：向前；}
@关键帧淡出{
0%{不透明度：1；}
100%{不透明度：0；}
}

对我有用。 请注意使用背景图像进行过渡

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

---

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

---

向下滚动到设置，所有文档都在那里。

您的代码经过一些修改后可以正常工作：

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%之间
• 等

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

---

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

您要在哪个浏览器中签入此内容？：DDo您有此代码的链接吗？当然，请参阅。您的代码经过一些修改后可以正常工作。请参阅下面我的完整回答；-）棒极了——虽然Webkit中已经有一段时间了，但规范中不允许这样做。当你说“全现代”时，你是指Chrome、Safari 6+、Firefox、IE10+？将有助于为本页的未来访问者澄清。（到目前为止已经有13372个了！）只有webkit——刚刚测试过（这还包括Opera 15）啊，我就是这么想的。正如我所说，这不是规范的一部分，所以它不应该工作，这取决于渲染引擎是否愿意这样做。背景图像可以从现在开始设置动画这个答案很早就出现在谷歌上，所以对于未来的读者来说，现在可以使用关键帧来设置动画：使用以下技术，使图像立即从一个图像切换到下一个图像：图像“sprite”+CSS动画“steps”对我来说效果很好。相反，如果我想要一个“inifinite”循环，使用上面提到的+opacity技术并没有达到预期效果：动画将失去控制，并且相互重叠。

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

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