Html CSS3脉冲动画在IE和FF中不工作_Html_Css

Html CSS3脉冲动画在IE和FF中不工作

html css

Html CSS3脉冲动画在IE和FF中不工作,html,css,Html,Css,所以我得到了一个无限循环的动画背景，它在Chrome和Safari上运行得非常好。但不能在IE和FF中工作。我试着看看其他人关于这个话题的问题，但还是不明白 CSS .background_slider { width: 100%; height: 100%; position: fixed; top: 5%; z-index: -2; } .animatie_bg{ animation: pulse 500s i

所以我得到了一个无限循环的动画背景，它在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;

  }
}

.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_slider animation_bg"></div>

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

不幸的是，

背景图像

属性，您尝试通过

背景

速记来设置动画。基于Blink引擎（如Chrome和Opera）的浏览器已经将其动画作为CSS的实验性扩展来实现，但您不能依赖它。作为一种解决方法，您可以尝试制作背景图像的精灵，并使用

steps（）

easing函数设置

背景位置的动画
此外，正如上面的评论所指出的，CSS动画属性和@关键帧块不需要-moz-
、-o-
和-ms-
前缀。Firefox从2012年发布的版本15开始就支持Unfixed，而且从来没有发布过需要-ms-
的IE版本（IE9根本不支持，IE10已经支持Unfixed）。Opera目前使用与Chrome相同的引擎，但带有旧引擎（12.1x）的最新版本也支持未修复的动画。
不幸的是，背景图像
属性，您尝试通过背景
速记来设置动画。基于Blink引擎（如Chrome和Opera）的浏览器已经将其动画作为CSS的实验性扩展来实现，但您不能依赖它。作为一种解决方法，您可以尝试制作背景图像的精灵，并使用steps（）
easing函数设置背景位置的动画
此外，正如上面的评论所指出的，CSS动画属性和@关键帧块不需要-moz-
、-o-
和-ms-
前缀。Firefox从2012年发布的版本15开始就支持Unfixed，而且从来没有发布过需要-ms-
的IE版本（IE9根本不支持，IE10已经支持Unfixed）。Opera目前使用与Chrome相同的引擎，但带有旧引擎（12.1x）的最新版本也支持未修复的动画。
因此在Ilya Strelsyn给出答案后，我开始寻找替代方案。我想到了这个：
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;

  }
}

.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_slider animation_bg"></div>

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



该解决方案与我第一次得到的结果不一样。但由于它与其他浏览器不兼容，这是最佳选择
此外，现在有更多的定制可能
谢谢大家抽出时间
 所以在伊利亚·斯特里森的回答之后，我开始寻找替代方案。我想到了这个：
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;

  }
}

.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_slider animation_bg"></div>

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



该解决方案与我第一次得到的结果不一样。但由于它与其他浏览器不兼容，这是最佳选择
此外，现在有更多的定制可能
谢谢大家抽出时间
 FF和IE的哪个版本@最新版本的关键帧不需要供应商前缀。首先，我没有前缀，因为我认为他们不需要。我下载了最新版本的FF和三分之一的microsoft Edge和IE 9。这适用于FF、Chrome和IE11。从9升级，它已经过时（有两个版本），世界上0.03%的人口使用它。FF和IE的哪个版本@最新版本的关键帧不需要供应商前缀。首先，我没有前缀，因为我认为他们不需要。我下载了最新版本的FF和三分之一的microsoft Edge和IE 9。这适用于FF、Chrome和IE11。从9升级，它已经过时（有两个版本），世界上0.03%的人口使用它。我现在删除了前缀。而且似乎并非所有浏览器都支持背景图像动画。我将尝试将它们加载到as.JPG中，并设置div本身的动画。我会更新的！谢谢您的时间。找到了解决方案！刚刚发布了答案，谢谢你提供我需要的信息，我现在删除了前缀。而且似乎并非所有浏览器都支持背景图像动画。我将尝试将它们加载到as.JPG中，并设置div本身的动画。我会更新的！谢谢您的时间。找到了解决方案！刚刚发布了答案，谢谢你提供我需要继续的信息