Question

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

为什么Firefox和Internet Explorer中的关键帧内没有background-image显示，有没有办法让它发挥作用？

Answer 1

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

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

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

从表面上看，看起来Firefox和IE正在正确处理它，而Chrome则没有。但是，它并非如此简单。当涉及它如何处理背景图像上的转换而不是动画时，Firefox似乎自相矛盾。在转换background-image时，它会立即显示第二张图片（hover代码段中的第一张div，而在制作动画时，第二张图片根本不显示（{{1代码段中的第二个hover。

因此，结论是 更好地不在关键帧内设置 div 。相反，我们必须像{oli.jp一样使用background-image或background-position。

opacity

div {
  background-image: url(http://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(http://placehold.it/100/123456/ffffff);
}
div:nth-of-type(2):hover {
  animation: show-img 1s ease forwards;
}
@keyframes show-img {
  to {
    background-image: url(http://placehold.it/100/123456/ffffff);
  }
}

如果您有多个图像应该在关键帧内以不同的百分比显示，那么最好在开始时在元素上添加所有这些图像，并在下面的代码段中设置其位置的动画。此 在Firefox，Chrome和IE中的工作方式相同 。

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

div {
  background-image: url(http://placehold.it/100x100), url(http://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>被设置为background-size，但在任何给定时间只显示一个图像，因为它们与容器的大小相同。在100% 100%到0%之间显示第一张图片，因为它位于50%（左上角），而第二张图片位于0px,0px（右边框之外）。在100px,0px，第一张图片位于50.1%（左边框外），第二张图片位于-100px,0px，因此可见。

0px,0px

div {
  background-image: url(http://lorempixel.com/100/100/nature/1), url(http://lorempixel.com/100/100/nature/2);
  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 10s 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 */
  }
}

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

1 个答案: