尽管有供应商前缀，CSS动画仅适用于Chrome

Question

我使用CSS创建了一个动画横幅，它在Chrome中运行良好。但是，尽管使用了vedor前缀（-moz-和-o-），横幅在IE或Firefox中都不起作用。

Here is a jsfiddle以下内容：

body {
  margin: 50px;
  background: #C8C9E0;
}
div#banner_wrapper {
  width: 728px;
  height: 90px;
  margin: 0px auto;
  border: #1D1F5E 1px solid;
  overflow: hidden;
  background-color: #000;
  background-image: url(background.jpg);
  position: relative;
}
#banner_slide1 {
  width: 361px;
  height: 55px;
  margin-top: 20px;
  position: absolute;
  left: 160px;
  z-index: auto;
}
#banner_slide2 {
  width: 355px;
  height: 51px;
  position: absolute;
  margin-top: 22px;
  left: 160px;
  z-index: 1;
}
#banner_slide3 {
  width: 300px;
  height: 38px;
  position-absolute;
  margin-top: 25px;
  margin-left: 200px;
  z-index: 2;
}
#banner_slide1 {
  -webkit-animation-name: banner_slide1;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: banner_slide1;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: banner_slide1;
  -o-animation-duration: 10s;
  -o-animation-iteration-count: infinite;
  -animation-name: banner_slide1;
  -animation-duration: 10s;
  -animation-iteration-count: infinite;
}
#banner_slide2 {
  -webkit-animation-name: banner_slide2;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -mos-animation-name: banner_slide2;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: banner_slide2;
  -o-animation-duration: 10s;
  -o-animation-iteration-count: infinite;
  -animation-name: banner_slide2;
  -animation-duration: 10s;
  -animation-iteration-count: infinite;
}
#banner_slide3 {
  -webkit-animation-name: banner_slide3;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -mos-animation-name: banner_slide3;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: banner_slide3;
  -o-animation-duration: 10s;
  -o-animation-iteration-count: infinite;
  -animation-name: banner_slide3;
  -animation-duration: 10s;
  -animation-iteration-count: infinite;
}
@-webkit-keyframes banner_slide1 {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes banner_slide1 {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes banner_slide1 {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes banner_slide1 {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes banner_slide2 {
  0% {
    opacity: 0;
  }
  30.5% {
    opacity: 0;
  }
  32.5% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes banner_slide2 {
  0% {
    opacity: 0;
  }
  30.5% {
    opacity: 0;
  }
  32.5% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes banner_slide2 {
  0% {
    opacity: 0;
  }
  30.5% {
    opacity: 0;
  }
  32.5% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes banner_slide2 {
  0% {
    opacity: 0;
  }
  30.5% {
    opacity: 0;
  }
  32.5% {
    opacity: 1;
  }
  52% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes banner_slide3 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes banner_slide3 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes banner_slide3 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes banner_slide3 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

<div id="banner_wrapper">
  <div id="banner_background">
    <a href="#" title="This is title" </a>

  </div>
  <div id="banner_slide1">
    <img src="http://www.placehold.it/50" alt="Alt Text" />
  </div>
  <div id="banner_slide2">
    <img src="http://www.placehold.it/50" alt="Alt Text" />
  </div>
  <div id="banner_slide3">
    <img src="http://www.placehold.it/50" alt="Alt Text" />
  </div>
</div>
<a href="# title=" This is title " id="banner_wrapper " </a>

我已经尝试了我能在这里以及其他地方找到的所有解决方案，但它仍然无效。