关键帧中的背景图像在 Firefox 或 Internet Explorer 中不显示

Question

我的网站上有几个动画，我刚刚意识到它们甚至没有出现在 Firefox 或 Internet Explorer 中。我在关键帧中有background-image。我这样做是因为我在动画中有不同百分比的不同图像。

为什么background-image 不显示在 Firefox 和 Internet Explorer 的关键帧中，有没有办法让它工作？

Answer 1

根据specs，background-image 不是可动画的或可转换的属性。但它似乎没有说明当它用作过渡或动画的一部分时应该如何处理或如何处理。因此，每个浏览器似乎处理它的方式不同。当 Chrome (Webkit) 显示背景图片时，Firefox 和 IE 似乎什么都不做。

an article at oli.jp 中的以下引用提供了一些有趣的信息：

虽然 CSS 背景和边框模块 Level 3 Editor's Draft 在撰写本文时对背景图像说“可动画：否”，但在 Chrome 19 Canary 中出现了对 CSS 中交叉淡入淡出图像的支持。在得到广泛支持之前，这可以通过图像精灵和背景位置或不透明度来伪造。要为渐变设置动画，它们必须是相同的类型。

从表面上看，Firefox 和 IE 似乎可以正确处理它，而 Chrome 则没有。但是，事情并非如此简单。 Firefox 在处理背景图像而不是动画的过渡方面似乎自相矛盾。在转换background-image 时，它会立即显示第二张图像（hover 在 sn-p 中的第一张div），而在动画时，第二张图像根本不会显示（hover 第二张@987654330 @ 在 sn-p)。

因此，结论是 最好不要设置 background-image 在关键帧内。相反，我们必须使用background-position 或opacity，就像指定的@oli.jp 一样。

div {
  background-image: url(https://placehold.it/100x100);
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
}
div:nth-of-type(1) {
  transition: background-image 1s ease;
}
div:nth-of-type(1):hover {
  background-image: url(https://placehold.it/100/123456/ffffff);
}
div:nth-of-type(2):hover {
  animation: show-img 1s ease forwards;
}
@keyframes show-img {
  to {
    background-image: url(https://placehold.it/100/123456/ffffff);
  }
}

<div></div>
<div></div>

---

如果您有多个图像应该在关键帧内以不同的百分比显示，那么最好在开始时将所有这些图像添加到元素上并像下面的 sn-p 那样为它们的位置设置动画。这在 Firefox、Chrome 和 IE 中的工作方式相同。

div {
  background-image: url(https://placehold.it/100x100), url(https://placehold.it/100/123456/ffffff);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
}
div:hover {
  animation: show-img 1s steps(1) forwards;
}
@keyframes show-img {
  to {
    background-position: -100px 0px, 0px 0px;
  }
}

<div></div>

或者，就像下面的sn-p。基本上每个图像与容器大小相同，因为background-size 设置为100% 100%，但在任何给定时间只显示一个图像，因为它们与容器大小相同。在0% 到50% 之间显示第一张图片，因为它位于0px,0px（左上角），而第二张图片位于100px,0px（右边框外）。在50.1%，第一张图片在-100px,0px（左边框外），第二张图片在0px,0px，因此可见。

div {
  background-image: url(https://picsum.photos/id/0/367/267), url(https://picsum.photos/id/1/367/267);
  background-size: 100% 100%; /* each image will be 100px x 100px */
  background-repeat: no-repeat;
  background-position: 0px 0px, 100px 0px;
  height: 100px;
  width: 100px;
  margin: 10px;
  border: 1px solid;
  animation: show-img 5s ease forwards;
}
@keyframes show-img {
  0%, 50%{
    background-position: 0px 0px, 100px 0px; /* initially 1st image will be shown as it it as 0px 0px */
  }
  50.1%, 100% {
    background-position: -100px 0px, 0px 0px; /* at 50.1% 2nd image will be shown as it it as 0px 0px */
  }
}

<div></div>