html - 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 来模拟旧版本，但这带来了相同的结果。我确定我一定遗漏了一些明显的东西，所以如果有人可以提供帮助，我们将不胜感激，谢谢。

附言。在较新版本的 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;
}

确保包含所有浏览器前缀以实现兼容性!