[英]Spinning gears css not working in IE
我有一些用于旋转齿轮的CSS,到目前为止,它们在Firefox中效果很好,但在IE中不起作用。 任何人都可以提供解决此问题的方法。
这是我的html以引用这些类:
<div class="gear" id="gear1"></div>
<div class="gear" id="gear2"></div>
<div class="gear" id="gear3"></div>
<div class="gear" id="gear4"></div>
<div class="gear" id="gear5"></div>
<div class="gear" id="gear6"></div>
<div class="gear" id="gear7"></div>
这是我的CSS:
/* CSS3 keyframes */
@-webkit-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes cckw {
0% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
100% {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/* gears */
.gear {
float: none;
position: absolute;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-o-animation-direction: normal;
-moz-animation-delay: 0;
-o-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-delay: 0;
animation-delay: 0;
-webkit-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#gear1 {
background: url('g1.png') no-repeat 0 0;
height: 85px;
left: 31px;
top: 45px;
width: 85px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
#gear2 {
background: url('g2.png') no-repeat 0 0;
height: 125px;
left: 105px;
top: 10px;
width: 125px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 16.84s;
-o-animation-duration: 16.84s;
animation-duration: 16.84s;
}
#gear3 {
background: url('g3.png') no-repeat 0 0;
height: 103px;
left: 149px;
top: 118px;
width: 103px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 13.5s;
-o-animation-duration: 13.5s;
animation-duration: 13.5s;
}
#gear4 {
background: url('g4.png') no-repeat 0 0;
height: 144px;
left: 46px;
top: 173px;
width: 144px;
-moz-animation-name: cckw;
-moz-animation-duration: 20.2s;
-webkit-animation-name: cckw;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 20.2s;
-o-animation-duration: 20.2s;
animation-duration: 20.2s;
}
#gear5 {
background: url('g1.png') no-repeat 0 0;
height: 85px;
left: 127px;
top: 292px;
width: 85px;
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}
#gear6 {
background: url('g2.png') no-repeat 0 0;
height: 125px;
left: 200px;
top: 283px;
width: 125px;
-moz-animation-name: cckw;
-moz-animation-duration: 16.84s;
-webkit-animation-name: cckw;
-o-animation-name: cckw;
animation-name: cckw;
-webkit-animation-duration: 16.84s;
-o-animation-duration: 16.84s;
animation-duration: 16.84s;
}
#gear7 {
background: url('g3.png') no-repeat 0 0;
height: 103px;
left: 277px;
top: 217px;
width: 103px;
-moz-animation-name: ckw;
-moz-animation-duration: 13.5s;
-webkit-animation-name: ckw;
-o-animation-name: ckw;
animation-name: ckw;
-webkit-animation-duration: 13.5s;
-o-animation-duration: 13.5s;
animation-duration: 13.5s;
}
如果您使用的版本早于IE 10,则关键帧动画将无法正常工作。 有关兼容性表,请参见Caniuse ;如果需要较早的浏览器支持,请考虑使用JavaScript / jQuery替代方法或polyfill。
编辑 :看起来您的某些CSS(即您的.gear
类)缺少-ms前缀,这将为您提供更广泛的兼容性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.