CSS3 animation not working IE9

Question

I want to create JSFiddle for animation. My animation not supported in IE9. Any suggestion.

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/

Answer 1

Try using -ms-transform in addition to your other rules, see below...

...be aware that -ms-transform is the only form of this property that is recognized by Windows Internet Explorer 9..

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

CSS3 animation not working IE9

Question

1 answers

solution1
1 2014-12-09 05:33:32

CSS3 animation not working IE9

Question

1 answers

solution1 1 2014-12-09 05:33:32

solution1
1 2014-12-09 05:33:32