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

您只有这些的-webkit版本：

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

Answer 2

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

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

IE10 CSS动画问题

2 个答案: