Question

我实现了这个不错的小巧css-based loader，然后发现它在IE上不起作用（我尝试了IE11）。我以为可能需要供应商特定的前缀，所以我尝试使用在线“ autoprefixer”（使用“后2个版本”）作为过滤器，并添加了“ -webkit-”前缀，但没有添加“ -ms-”前缀想知道css代码的编写方式是否有问题，从而使“ -ms-”前缀不显示。我尝试将“ -webkit-”手动替换为“ -ms-”，但在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

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

我看到这里对此问题进行了一些讨论：
“ CSS3 animation is not working in IE11 but works in other browsers”

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

1 个答案: