CSS3 - 使用CSS3过渡时，图片在IE中无法显示

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

- Jakwakwa

---

哪个版本的IE？你试过先给图像设置一些尺寸吗？ - vector

Answer 1

CSS3动画在IE中不受支持。

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

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

- Bror