为什么这个 CSS 动画不能在 IE 上运行？

Question

我使用 'last 2 versions' 作为过滤器实现了这个漂亮的小 css-based loader I found and then realized it doesn't work on IE (I tried IE11). I thought maybe it needed the vendor specific prefixes, so I tried using an online autoprefixer，它添加了“-webkit-”前缀而不是“-ms-”，这让我想知道是否有问题css 代码的编写方式使得“-ms-”前缀不显示。我尝试用“-ms-”手动替换“-webkit-”，但它在 IE 上仍然不起作用。

什么阻止它在 IE 上运行？供应商前缀是否与此有关？

目前我还没有在 Chrome 和 IE 以外的任何浏览器上尝试过，但如果合理的话，我想让它在所有主要浏览器的最新 2 个版本上运行。

原始 CSS - 在 Chrome 上运行良好，但在 IE 上运行不佳：

.page-loader{ background: #f9f9f9 none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9998;}
.loader {
    height: 8px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 50%;
    width: 44px;
}
.dot {
    background: #ccc none repeat scroll 0 0;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    position: absolute;
    width: 10px;
}
.dot_1 {
    animation: 1.5s linear 0s normal none infinite running animateDot1;
    background: #f26f29 none repeat scroll 0 0;
    left: 12px;
}.dot_2 {
    animation: 1.5s linear 0.5s normal none infinite running animateDot2;
    left: 24px;
}.dot_3 {
    animation: 1.5s linear 0s normal none infinite running animateDot3;
    left: 12px;
}.dot_4 {
    animation: 1.5s linear 0.5s normal none infinite running animateDot4;
    left: 24px;
}
 @keyframes animateDot1 {
0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(180deg) translateX(-12px);
}
75% {
    transform: rotate(180deg) translateX(-12px);
}
100% {
    transform: rotate(360deg) translateX(-12px);
}
}
@keyframes animateDot2 {
0% {
    transform: rotate(0deg) translateX(-12px);
}
25% {
    transform: rotate(-180deg) translateX(-12px);
}
75% {
    transform: rotate(-180deg) translateX(-12px);
}
100% {
    transform: rotate(-360deg) translateX(-12px);
}
}
@keyframes animateDot3 {
0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(180deg) translateX(12px);
}
75% {
    transform: rotate(180deg) translateX(12px);
}
100% {
    transform: rotate(360deg) translateX(12px);
}
}
@keyframes animateDot4 {
0% {
    transform: rotate(0deg) translateX(12px);
}
25% {
    transform: rotate(-180deg) translateX(12px);
}
75% {
    transform: rotate(-180deg) translateX(12px);
}
100% {
    transform: rotate(-360deg) translateX(12px);
}
}

Answer 1

或许尝试从您的 animation 属性中删除 running 值。这使动画在 IE11 中对我有用。

我看到这里有一些关于这个问题的讨论：
“”

为什么这个 CSS 动画不能在 IE 上运行？

Why doesn't this CSS animation work on IE?

html

css

cross-browser