Question

如何编辑我的代码以使其在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块或任何东西来制作类似的效果吗？

Answer 1

IE10是第一个支持转换的IE。我通常要么忽略旧浏览器中的动画（旧的IE经常 - >旧的计算机，所以动画通常不稳定。）

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

Answer 2

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

CSS转换和动画无法在IE中运行（适用于Firefox / Chrome）

2 个答案: