在IE中工作的CSS过渡和动画（适用于Firefox/Chrome）

如何编辑我的代码以使其在IE中工作。它在Firefox和Chrome中运行良好。我找不到在Internet Explorer中调用transition和animation的正确属性。在IE中工作的CSS过渡和动画（适用于Firefox/Chrome）

<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中同样的效果？

来源

2011-12-20 matture

我不觉得IE 9支持转换吗？编辑：[见这里]（http://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions） – 2011-12-20 18:54:51

http://www.laughingsamurai.com/ 我希望它看起来像这可以在IE – matture 2011-12-20 20:47:07

用于Firefox的'-moz-'，适用于Opera的'-o-'，适用于IE的'-ms-'适用。但IE不支持转换或动画（请参阅Rich Bradshaw的回答）。 – c69 2011-12-20 21:29:09

IE10是第一个支持转换的IE。我通常会忽略旧的浏览器中的动画（旧的IE经常 - >旧电脑，所以动画往往是波涛汹涌）。

如果真的需要，那么使用jQuery来修补它。缺点是动画颜色没有内置到jQuery中，所以你需要一个插件。

来源

2011-12-20 20:52:38

请注意CSS属性的“-webkit”部分。它仅适用于webkit浏览器（Chrome + Safari）IE不支持“-webkit”CSS属性

来源

2011-12-20 20:52:01 JoshStrange

在IE中工作的CSS过渡和动画（适用于Firefox/Chrome）

回答

相关问题