CSS关键帧动画在IE、Firefox中背景图不显示，求无需background-position的解决办法

嘿，这个问题我之前也碰到过——IE（尤其是IE11及以下）和旧版Firefox对CSS关键帧里直接切换background-image的支持确实拉胯，IE基本完全不买账。不过不用慌，咱们换个思路，不用background-position也能搞定，核心是用多个叠加的元素分别承载背景图，然后通过动画控制它们的显示状态。

核心思路 #

既然直接切换背景图有兼容性问题，那咱们把每张背景图放在独立的元素里，让这些元素叠在一起，然后通过控制元素的opacity（显示/隐藏）和transform（缩放）来实现动画效果。这种方式的兼容性覆盖了IE10+和所有版本的Firefox，完全符合你的需求。

具体实现步骤 #

1. 调整HTML结构 #

创建一个容器，里面放三个子元素，每个对应你要切换的背景图：

<div class="background-container">
  <div class="bg-item bg-gandhi"></div>
  <div class="bg-item bg-cv"></div>
  <div class="bg-item bg-apj"></div>
</div>

2. 基础CSS设置 #

给容器设置相对定位，让子元素可以绝对定位覆盖它；每个子元素都铺满容器，设置各自的背景图：

.background-container {
  position: relative;
  width: 500px; /* 按需设置你的容器尺寸 */
  height: 300px;
  overflow: hidden; /* 防止缩放时内容溢出容器 */
}

.bg-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; /* 确保背景图铺满元素 */
  background-position: center; /* 可选，让背景图居中显示 */
  opacity: 0; /* 默认隐藏所有子元素 */
}

.bg-gandhi {
  background-image: url('../images/gandhi.jpg');
}

.bg-cv {
  background-image: url('../images/cv.jpg');
}

.bg-apj {
  background-image: url('../images/apj.jpg');
}

3. 编写关键帧动画 #

给每个子元素编写对应的动画，控制它们的opacity和transform，让它们在正确的时间段激活：

/* 第一张图的动画：0%-49%显示，从缩放1.5过渡到正常，然后淡出 */
@keyframes animate-gandhi {
  0% {
    opacity: 1;
    transform: scale(1.5);
  }
  49% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* 第二张图的动画：50%-99%显示，保持正常状态 */
@keyframes animate-cv {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 第三张图的动画：100%时显示，保持缩放1的状态 */
@keyframes animate-apj {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

最后把动画绑定到对应的子元素上，设置相同的动画时长和循环方式：

.bg-gandhi {
  animation: animate-gandhi 10s infinite; /* 时长按需调整 */
}

.bg-cv {
  animation: animate-cv 10s infinite;
}

.bg-apj {
  animation: animate-apj 10s infinite;
}

额外优化提示 #

如果想要更平滑的过渡效果，可以调整关键帧的百分比节点，比如把透明度的变化设置在1%-2%的区间内，让切换更自然。另外，如果你需要兼容IE10，记得给动画属性添加-ms-前缀（比如-ms-animation），不过现在IE10+已经支持不带前缀的标准语法了。

内容的提问来源于stack exchange，提问作者varunvenu