关键帧中的背景图像不会在Firefox或Internet Explorer中显示 [英] Background-image in keyframe does not display in Firefox or Internet Explorer

问题描述

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

I have several animations on my site that I just realized do not even show up in Firefox or Internet Explorer. I have the background-image within the keyframes. I do this because I have different images in different percentages with the animation.

为什么在Firefox和Internet Explorer中的关键帧中不显示 background-image

Why doesn't the background-image display within the keyframes in Firefox and Internet Explorer and is there a way to make this work?

推荐答案

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

As per the specs, background-image is not an animatable or a transitionable property. But it does not seem to say anything about what or how the handling should be when it is used as part of transition or animation. Because of this, each browser seem to be handling it differently. While Chrome (Webkit) is displaying the background image, Firefox and IE seem to do nothing.

以下引文位于 oli.jp上的文章提供了一些有趣的信息：

The below quote found in an article at oli.jp provides some interesting information:

虽然CSS背景和边框模块3级编辑草稿在写作时表示背景图像的Animatable：no，但在Chrome 19 Canary中支持CSS中的交叉渐变图像。直到广泛支持到达，这可以伪装通过图像精灵和背景位置或不透明度。对于动画渐变，它们必须是相同的类型。

While CSS Backgrounds and Borders Module Level 3 Editor’s Draft says "Animatable: no" for background-image at the time of writing, support for crossfading images in CSS appeared in Chrome 19 Canary. Until widespread support arrives this can be faked via image sprites and background-position or opacity. To animate gradients they must be the same type.

表面上看起来像Firefox和IE正在处理它正确Chrome不是。但是，它不是那么简单。 Firefox似乎矛盾自己，当它涉及到如何处理背景图像而不是动画的转换。在转换 background-image 时，它立即显示第二个图像（ hover 第一个 div c>第二个图片不会显示（ hover 第二个 div ）。

On the face of it, it looks like Firefox and IE are handling it correctly while Chrome is not. But, it is not so simple. Firefox seems to contradict itself when it comes to how it handles transition on background image as opposed to animation. While transitioning background-image, it shows up the second image immediately (hover the first div in the snippet) whereas while animating, the second image doesn't get displayed at all (hover the second div in the snippet).

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

So, conclusion is that it is better to not set background-image inside keyframes. Instead, we have to use background-position or opacity like specified @ oli.jp.

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

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

如果您有多个图像应该在关键帧中以不同的百分比显示，那么最好在开始时将所有这些图像添加到元素上，并如下面的代码段中所示对其位置进行动画处理。

If you have multiple images that should be shown at different percentages within the keyframe then it would be a better idea to add all those images on the element at start and animate their position like in the below snippet. This works the same way in Firefox, Chrome and IE.

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 （左边界外） code> 0px，0px ，因此它是可见的。

Or, like in the below snippet. Basically each image is the same size as the container as background-size is set as 100% 100% but only one image is shown at any given time because of them being the same size as container. Between 0% to 50% the first image is shown because it is at 0px,0px (left-top) whereas the second image is at 100px,0px (outside the right border). At 50.1%, the first image is at -100px,0px (outside left border) and second image is at 0px,0px and so it is visible.

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 */
  }
}

<div></div>

这篇关于关键帧中的背景图像不会在Firefox或Internet Explorer中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！