Crossfade CSS слайд шоу не работи в Internet Explorer 7-8 - html, css, html5, css3

Здравейте аз използвам следните CSS за corssизбледняват слайдшоуто, но проблемът е, че не работи в Iternet Explorer версия 7/8 какво внушава, за да работи там може да има? Аз triend 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.