0
애니메이션 용 JSFiddle을 만들고 싶습니다. 내 애니메이션은 IE9에서 지원되지 않습니다. 어떠한 제안.CSS3 애니메이션이 작동하지 않습니다. 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);
}
}
IE9은 CSS3의 애니메이션 속성을 지원하지 않습니다. IE10 이후부터 지원합니다. –
예, Internet Explorer 9 [CSS3 Animation을 지원하지 않습니다] (http://caniuse.com/#feat=css-animation) 및 필요한 프리픽스는 Chrome의 경우 '-webkit-'입니다. – misterManSam
@misterManSam 당신이 사실이지만 어떤 thrid 파티 JS 또는 IE9에서 애니메이션을 지원하는 데 도움이 뭔가 – hardy