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

【问题标题】：CSS3 - Images doesn't show in IE whilst using CSS3 transitionsCSS3 - 使用 CSS3 过渡时，图像在 IE 中不显示
【发布时间】：2012-12-28 19:32:27
【问题描述】：

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

【问题讨论】：

哪个版本的IE？您是否尝试过先给图像一些尺寸？

标签： css image internet-explorer transitions

【解决方案1】：

IE 不支持 CSS3 动画。

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

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

【讨论】：