为什么这个CSS动画在IE上不起作用？

Question

我实现了我找到的这个不错的基于CSS的负载器，然后意识到它在IE上不起作用(我尝试了IE11(。我认为也许它需要特定于供应商的前缀，所以我尝试使用"最后2个版本"作为过滤器使用在线自动改装器，并添加'-webkit-'前缀，而不是" -ms-"，这让我想知道是否有东西CSS代码的编写方式错误，该代码使" -ms-"前缀不显示。我尝试用" -ms-"手动替换" -webkit-"，但它仍然对IE不起作用。

是什么阻止了它在IE上的工作？供应商的前缀是否与它有任何关系？

目前我还没有尝试过除Chrome和IE以外的任何浏览器，但是如果合理的话，我想在所有主要浏览器上都可以在所有主要浏览器上使用。

原始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中对我有用。

我看到这里有一些讨论：
" CSS3动画在IE11中不起作用，而是在其他浏览器中起作用"