CSS 过渡和动画在 IE 中不起作用（在 Firefox/Chrome 中起作用）答案

【问题标题】：CSS transition and animation not working in IE (works in Firefox/Chrome)CSS 过渡和动画在 IE 中不起作用（在 Firefox/Chrome 中起作用）
【发布时间】：2012-01-24 17:00:07
【问题描述】：

如何编辑我的代码以使其在 IE 中运行。它在 Firefox 和 Chrome 中运行良好。我无法确定在 Internet Explorer 中调用 transition 和 animation 的正确属性。

<html>
<head>
<title> Sample for Konstantin</title>
<style type="text/css">

.text p
{text-align:center;
margin-left:auto;
margin-right:auto;
left:50%;

}
.text {

    overflow: hidden;
    margin-bottom: 110px;
    }

.text h1 {
    color: black;
    font-family: 'footlight mt light';
    font-size: 50px;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: .9s;
    letter-spacing: -10px;

    }
    a { text-decoration:none }

    .text h1 span a {
        -webkit-transition: 0.9s ;
                color: #9C948D;
        }

        .text h1:hover span a {
            color: blue;
            }


</style>
</head>
<body>
    <center>

    <div class="text"><p><h1>This is a sample, <br />
   My Name is Matthew<br />Here is <span><a href="http://www.nba.com" >NBA Website</a>.</span><br />This is very simple<br />Here is  <span><a href="http://www.facebook.com" > Facebook!</a>.</span></h1>
</p></div>
</body></html>

编辑：有没有像 div 块一样使用或在 ie 中产生类似效果的任何东西？

【问题讨论】：

我认为 IE 9 不支持转换，是吗？编辑：see here
laughingsamurai.com 我希望它看起来像这样，这在 IE 中有效
-moz- 用于 Firefox，-o- 用于 Opera，-ms- 用于 IE。但 IE 还不支持过渡或动画（请参阅 Rich Bradshaw 的回答）。

标签： html internet-explorer css

【解决方案1】：

注意 CSS 属性的“-webkit”部分。它只适用于 webkit 浏览器 (Chrome+Safari) IE 不支持 "-webkit" CSS 属性

【讨论】：

【解决方案2】：

IE10 是第一个支持转换的 IE。我通常要么忽略旧浏览器中的动画（旧 IE 经常 -> 旧电脑，所以动画经常断断续续）。

如果确实需要，请使用 jQuery 对其进行修补。缺点是动画颜色没有内置在 jQuery 中，所以你需要一个插件。

【讨论】：