CSS3动画不工作IE9答案

【问题标题】：CSS3 animation not working IE9CSS3动画不工作IE9
【发布时间】：2014-12-09 05:24:27
【问题描述】：

我想为动画创建 JSFiddle。 IE9 不支持我的动画。任何建议。

HTML

<html>
<head>
    <link rel="stylesheet" href="style2.css" media="screen" />
</head>
<body>
<div id="container">
    <div id="button">Hover here!</div>
    <div id="globe_small"></div>
    <div id="globe_large"></div>
    <div id="globe_hands"></div>
    <div id="globe_background"></div>
</div>
</body>
</html>


#container{position:relative;width:500px;}
#button {position:absolute;width:300px;background-color:pink;top:420px;z-index:5;    margin:0 auto;text-align:center;padding-top:15px; padding-bottom:15px;color:#fff;      text-transform:uppercase;font-weight:bold;left:90px;}
#globe_background{background:red;width:494px;height:397px;z-index:1;position:absolute; top:0;}
 #globe_hands{background:blue;width:295px;height:129px;z-index:3;top:265px;      left:96px;position:absolute;}
#globe_small {background:green;height:160px;width:160px;position:absolute;       left:165px;top:185px;z-index:4;-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s; -o-transition-duration: 0.8s;transition-duration: 0.8s;-ms-transition-duration: 0.8s; -webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform; transition-property: -o-transform;transition-property: transform;-ms-transition-property: transform;    
}
#button:hover ~ #globe_large{
    -webkit-animation-name: spin;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-timing-function: linear;  
    -webkit-animation-duration: 1s;

    -moz-animation-name: mozspin;  
    -moz-animation-iteration-count: infinite;  
    -moz-animation-timing-function: linear;  
    -moz-animation-duration: 1s;

    -o-animation-name: ospin;  
    -o-animation-iteration-count: infinite;  
    -o-animation-timing-function: linear;  
    -o-animation-duration: 1s;

    -ms-animation-name: msspin;  
    -ms-animation-iteration-count: infinite;  
    -ms-animation-timing-function: linear;  
    -ms-animation-duration: 1s;

    animation-name: nospin;  
    animation-iteration-count: infinite;  
    animation-timing-function: linear;  
    animation-duration: 1s;
}

@-webkit-keyframes spin {  
from {  
    -webkit-transform: rotate(0deg);  
}  
to {  
    -webkit-transform: rotate(360deg);  
    }  
}
@-moz-keyframes mozspin {  
from {  
    -moz-transform: rotate(0deg);  
}  
to {  
    -moz-transform: rotate(360deg);  
    }  
}    
@-o-keyframes ospin {  
from {  
    -moz-transform: rotate(0deg);  
}  
to {  
    -moz-transform: rotate(360deg);  
    }  
}   
@keyframes nospin {  
from {  
    transform: rotate(0deg);  
}  
to {  
    transform: rotate(360deg);  
    }  
}
@keyframes msspin {  
from {  
    transform: rotate(0deg);  
}  
to {  
    transform: rotate(360deg);  
    }  
}

http://jsfiddle.net/fJxsV/

【问题讨论】：

IE9 不支持 CSS3 动画属性。 IE10 以后将支持。
是的，IE 9 doesn't support CSS3 Animation，您需要的唯一前缀是 Chrome 的 -webkit-。
@misterManSam 你是对的，但是任何第三方 JS 或类似的东西都可以帮助支持 IE9 中的动画

标签： javascript jquery html css

【解决方案1】：

除了您的其他规则外，请尝试使用 -ms-transform，见下文...

...请注意 -ms-transform 是此属性的唯一形式 Windows Internet Explorer 9 可识别..

http://msdn.microsoft.com/en-us/library/ie/jj127312%28v=vs.85%29.aspx

【讨论】：