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; 
}