Слайд-шоу Crossfade css не працює в Internet Explorer 7-8 - html, css, html5, css3

Привіт, я використовую наступний CSS для корсаFade слайд-шоу, але проблема полягає в тому, що він не працює всередині Iternet Explorer версії 7/8, що може запропонувати зробити його там? Я породжую сценарій слайд-шоу Jquery, він працює, але у мене є меню над слайд-шоу, яке jquery змушує мерехтіти на різному зменшенні зображення.

#crossfade > img {
width: 100%;
height: 372px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}

#crossfade > img:nth-child(2)  {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}

@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

це html

<div id="crossfade">
<img src="/images/images/home_background.jpg" />
<img src="/images/images/1_background.jpg" />
<img src="/images/images/2_background.jpg" />
<img src="/images/images/3_background.jpg" />
<img src="/images/images/4_background.jpg" />
<img src="/images/images/5_background.jpg" />
</div>

Відповіді:

Це не працює просто тому, що анімації CSS3, на жаль, не підтримуються IE 9 і новішими.

Довідка тут

Якщо ви хочете отримати підтримку в старих браузерах, не рухайтеся по CSS3, щоб досягти цього. Просто використовуйте jQuery.