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

问题描述

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

为什么 background-image 不显示在 Firefox 和 Internet Explorer 的关键帧内，有什么方法可以实现这一点?

解决方案

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

在 oli.jp 上的一篇文章中找到的以下引用 提供了一些有趣的信息:

<块引用>

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

从表面上看，Firefox 和 IE 似乎可以正确处理它，而 Chrome 则不然.但是，事情并没有那么简单.Firefox 在处理背景图像上的过渡而不是动画时似乎自相矛盾.在转换 background-image 时，它立即显示第二个图像(hover 代码段中的第一个 div)，而在动画时，第二个图像根本没有显示(hover 代码段中的第二个 div).

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

div {背景图片:网址(https://placehold.it/100x100)；高度:100px；宽度:100px；边距:10px；边框:1px 实心；}div:nth-of-type(1) {过渡:背景图像 1s 缓和；}div:nth-of-type(1):hover {背景图片:网址(https://placehold.it/100/123456/ffffff)；}div:nth-of-type(2):hover {动画:show-img 1s 缓动前进；}@keyframes 显示-img {到 {背景图片:网址(https://placehold.it/100/123456/ffffff)；}}

<div></div>

<小时>

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

div {背景图片:网址(https://placehold.it/100x100)，网址(https://placehold.it/100/123456/ffffff)；背景尺寸:100% 100%；背景重复:不重复；背景位置:0px 0px，100px 0px；高度:100px；宽度:100px；边距:10px；边框:1px 实心；}div:悬停{动画:show-img 1s 步(1)向前；}@keyframes 显示-img {到 {背景位置:-100px 0px, 0px 0px;}}

<div></div>

或者，就像下面的代码片段一样.基本上每个图像与容器的大小相同，因为 background-size 设置为 100% 100% 但在任何给定时间只显示一个图像，因为它们是与容器大小相同.在 0% 到 50% 之间显示第一张图像，因为它位于 0px,0px(左上)而第二张图像位于100px,0px(在右边框外).在 50.1% 处，第一张图片位于 -100px,0px(左边框外)，第二张图片位于 0px,0px 处，所以它可见.

div {背景图片:网址(https://picsum.photos/id/0/367/267)，网址(https://picsum.photos/id/1/367/267)；背景尺寸:100% 100%；/* 每张图片都是 100px x 100px */背景重复:不重复；背景位置:0px 0px，100px 0px；高度:100px；宽度:100px；边距:10px；边框:1px 实心；动画:show-img 5s 缓动前进；}@keyframes 显示-img {0%, 50%{背景位置:0px 0px，100px 0px；/* 最初第一个图像将显示为 0px 0px */}50.1%, 100% {背景位置:-100px 0px, 0px 0px;/* 在 50.1% 第二张图像将显示为 0px 0px */}}

<div></div>

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.

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

解决方案

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.

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

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.

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).

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(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>

---

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(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>

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(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>

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