Question

所以我得到了一个无限循环的动画背景，它完美无缺的Chrome和Safari。但是在IE和FF中无法得到它。我试着看看其他人关于这个话题的问题，但仍然无法弄清楚。

CSS

    .background_slider {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 5%;
     z-index: -2;
   }

   .animatie_bg{
     animation: pulse 500s infinite;
    -webkit-animation: pulse 500s infinite;
    -ms-animation: pulse 500s infinite;
    -o-animation: pulse 500s infinite;
    -moz-animation: pulse 500s infinite;  
   }

@keyframes pulse {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}


@-moz-keyframes pulse {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}


@-webkit-keyframes pulse {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}

@-ms-keyframes fadeIn {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}
@-o-keyframes fadeIn {
  0% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
  12% {
    background: url('../images/background/deepblue.jpg');
    background-size: cover;

  }
  37% {
    background: url('../images/background/green.jpg');
    background-size: cover;

  }
  62% {
    background: url('../images/background/lightpink.jpg');
    background-size: cover;

  }
  100% {
    background: url('../images/background/bordaux.jpg');
    background-size: cover;

  }
}

HTML

<div class="background_slider animation_bg"></div>

Answer 1

不幸的是，background-image属性，您试图通过background速记is specified as not animatable制作动画。基于Blink引擎的浏览器（如Chrome和Opera）已将其动画实现为CSS的实验扩展，但您无法依赖它。作为解决方法，您可以尝试制作背景图片的精灵，并使用background-position缓动功能为steps()设置动画。

此外，正如上面的评论中所指出的，CSS -moz-属性和-o-块不需要-ms-，animation和@keyframes前缀。自从2012年发布的版本15以来，Firefox支持它们没有前缀，并且没有出现需要{IE 1}的IE版本（IE9根本不支持它，IE10已经支持它没有前缀）。 Opera目前使用与Chrome相同的引擎，但最新版本的引擎（12.1x）也支持无前缀的动画。

Answer 2

因此，在Ilya Strelsyn的回答之后，我去寻找另一种选择。并想出了这个：

<强> CSS

.background_1 {
  width: 102%;
  height: 102%;
  animation: BG_one 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_2 {
  width: 102%;
  height: 102%;
  animation: BG_two 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_3 {
  width: 102%;
  height: 102%;
  animation: BG_three 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

.background_4 {
  width: 102%;
  height: 102%;
  animation: BG_four 500s infinite;
  position: fixed;
  top: 5%;
  z-index: -2;
}

@keyframes BG_one {
  0%, 100% {
    opacity: 1
  }
  12% {
    opacity: 0.5
  }
  37% {
    opacity: 0
  }
  62% {
    opacity: 0
  }
  87% {
    opacity: 0.5
  }
}

@keyframes BG_two {
  0%, 100% {
    opacity: 0.5
  }
  12% {
    opacity: 1
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 0
  }
  87% {
    opacity: 0
  }
}

@keyframes BG_three {
  0%, 100% {
    opacity: 0
  }
  12% {
    opacity: 0
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 1
  }
  87% {
    opacity: 0.5
  }
}

@keyframes BG_four {
  0%, 100% {
    opacity: 0
  }
  12% {
    opacity: 0
  }
  37% {
    opacity: 0.5
  }
  62% {
    opacity: 1
  }
  87% {
    opacity: 0.5
  }
}

<强> HTML

  <div class="background_1"><img alt="bordaux" src="images/background/bordaux.jpg"></div>
  <div class="background_2"><img alt="deepblue" src="images/background/deepblue.jpg"></div>
  <div class="background_3"><img alt="green" src="images/background/green.jpg"></div>
  <div class="background_4"><img id="AJHSBD" alt="lightpink" src="images/background/lightpink.jpg"></div>

解决方案与第一次输出的输出不同。但由于它与其他浏览器不兼容，这是最佳选择。

现在可以进行更多自定义。

谢谢大家的时间！

CSS3脉冲动画在IE和FF中不起作用

2 个答案: