IE10 CSS動畫問題

Question

我遇到的問題是，我建立的網站的一小部分完美地在所有瀏覽器和IE的舊版本上工作，但不是在最新版本上。如您所知，IE不再支持HTML中的[IF]語句，並且似乎不支持該命令。我的問題是使用以下CSS一些圖片的小動畫：

.fadein img { 
    position:absolute; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    -webkit-animation-name: fade; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 32s; 
    animation-name: fade; 
    animation-iteration-count: infinite; 
    animation-duration: 32s; 
} 

@-webkit-keyframes fade { 
    0% {opacity: 0;} 
    20% {opacity: 1;} 
    33% {opacity: 0;} 
    53% {opacity: 0;} 
    100% {opacity: 0;} 
} 
@keyframes fade { 
    0% {opacity: 0;} 
    20% {opacity: 1;} 
    33% {opacity: 0;} 
    53% {opacity: 0;} 
    100% {opacity: 0;} 
} 
#f1 { 
    -webkit-animation-delay: -4s; 
} 
#f2 { 
    -webkit-animation-delay: -8s; 
} 
#f3 { 
    -webkit-animation-delay: -16s; 
} 
#f4 { 
    -webkit-animation-delay: -24s; 
} 
#f5 { 
    -webkit-animation-delay: -32s; 
} 

這是目前正在使用的網頁http://www.portsmouthtap.co.uk到頁腳近幾年行情。從我所做的研究來看，IE應該接受CSS中的「動畫名稱」等，並且應該能夠模擬以前的版本。我曾嘗試使用js來模擬較老的版本，但這帶來了相同的結果。我相信我一定會錯過一些明顯的東西，所以如果有人能幫上忙，那將不勝感激，謝謝。

ps。在IE的新版本中，圖像顯示出來並淡出，但是一次顯示，然後不重複，這顯然不是所期望的效果。請參閱該網站的Chrome版本以查看動畫的外觀，謝謝。

對應的HTML：

<div id="Quote-Images" class="fadein"> 
    <img id="f5" src="img/quote_05.jpg" alt=""> 
    <img id="f4" src="img/quote_04.jpg" alt=""> 
    <img id="f3" src="img/quote_01.jpg" alt=""> 
    <img id="f2" src="img/quote_02.jpg" alt=""> 
    <img id="f1" src="img/quote_03.jpg" alt=""> 
</div> 

Answer 1

運行它通過Prefixr：

我得到這個：

.fadein img { 
    position: absolute; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 

    -webkit-animation-name: fade; 
    -moz-animation-name: fade; 
    -ms-animation-name: fade; 
    -o-animation-name: fade; 
    animation-name: fade; 

    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -ms-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    -webkit-animation-duration: 32s; 
    animation-duration: 32s; 
} 

@keyframes "fade" { 
0% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
20% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
33% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
53% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
100% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 

} 

@-moz-keyframes fade { 
0% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
20% { 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
33% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
53% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
100% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 

} 

@-webkit-keyframes "fade" { 
0% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
20% { 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
33% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
53% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
100% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 

} 

@-ms-keyframes "fade" { 
0% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
20% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
33% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
53% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
100% { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 

} 

@-o-keyframes "fade" { 
0% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
20% { 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
33% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
53% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
100% { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 

} 

#f1 { 
    -webkit-animation-delay: -4s; 
    -moz-animation-delay: -4s; 
    -ms-animation-delay: -4s; 
    -o-animation-delay: -4s; 
    animation-delay: -4s; 
} 

#f2 { 
    -webkit-animation-delay: -8s; 
    -moz-animation-delay: -8s; 
    -ms-animation-delay: -8s; 
    -o-animation-delay: -8s; 
    animation-delay: -8s; 
} 

#f3 { 
    -webkit-animation-delay: -16s; 
    -moz-animation-delay: -16s; 
    -ms-animation-delay: -16s; 
    -o-animation-delay: -16s; 
    animation-delay: -16s; 
} 

#f4 { 
    -webkit-animation-delay: -24s; 
    -moz-animation-delay: -24s; 
    -ms-animation-delay: -24s; 
    -o-animation-delay: -24s; 
    animation-delay: -24s; 
} 

#f5 { 
    -webkit-animation-delay: -32s; 
    -moz-animation-delay: -32s; 
    -ms-animation-delay: -32s; 
    -o-animation-delay: -32s; 
    animation-delay: -32s; 
} 

確保您包含所有兼容性的瀏覽器前綴！

Answer 2

您只需將它們的-webkit版本：

#f1 { 
    -webkit-animation-delay: -4s; 
}