CSS animation only work in Chrome despite vendor prefixes - html

Question

I've created an animated banner using CSS and it works perfect in Chrome. However, despite using the vedor prefixes (-moz- and -o-), the banner doesn't work in IE nor Firefox.
Here is a jsfiddle of the below:
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>
I've already tried every solution I could find both here as well as everywhere else and it still does not work.