Question

CSS3 - 使用CSS3过渡时，IE中不显示图像。我不介意动画在IE中不起作用，但我至少希望图像在IE中正常显示。以下是我的代码：

HTML：

    <div id="bg">
    <img class="fadeIn fadeIn-3s fadeIn-Delay-3s" src="images/about-phil.jpg" alt="Phil Davel About Us Background Image">
</div>

CSS：

.fadeIn {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
margin-bottom: -10px;

}

.fadeIn-3s {
    -webkit-animation-duration:3s;
    -moz-animation-duration:3s;
    -o-animation-duration:3s;
    animation-duration:3s;
}

.fadeIn-Delay-3s {
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
}

Answer 1

IE不支持CSS3动画。

如果用户使用IE，您可以在HTML中使用条件语句来包含额外的CSS文件。通过这样做，您可以以不同的方式显示图像。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

CSS3 - 在使用CSS3过渡时，图像在IE中不显示

1 个答案: