Html 旋转齿轮css不在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>

---

如果您使用的是比IE 10旧的任何东西，关键帧动画将无法工作。请参阅兼容性表，如果需要较老的浏览器支持，请考虑JavaScript /jQuery备选或PultFube。

---

编辑：看起来您的一些CSS（即您的

.gear

类）缺少-ms前缀，这将为您提供更广泛的兼容性。

您使用的是什么版本的IE？@Dai，我使用的是IE8。但是在看到下面的答案后，我需要找到一个替代方案。IE8既不支持CSS3动画，也不支持CSS3转换，抱歉。

/* 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;
}