CSS无限动画无法在IE11中工作

Question

我在应用程序中创建了一个简单的加载网格，并在其上添加了一个动画。这个动画似乎适用于除IE11以外的所有浏览器。

有人可以帮我理解为什么它不工作，如何让它在IE11中工作？

.loading { 
 
    background-color: #ededed; 
 
    height: 12px; 
 
    width: 500px; 
 
    overflow: hidden; 
 
} 
 

 
.animation { 
 
    animation: loading 1.2s linear; 
 
    animation-iteration-count: infinite; 
 
    background-color: #e0e0e0; 
 
    height: 100%; 
 
    left: 0; 
 
    position: relative; 
 
    top: auto; 
 
    width: 300px; 
 
} 
 

 
@keyframes loading { 
 
    from {left: -30rem} 
 
    to {left: calc(100% + 30rem)} 
 
}

<div class="loading"> 
 
    <div class="animation"></div> 
 
</div>

的jsfiddle如果你有兴趣：https://jsfiddle.net/9shufwsL/

Answer 1

显然calc()不会在这方面的工作。

我将中的left的值更改为使用基于百分比的终结点，它在IE11中起作用。

.loading { 
 
    background-color: #ededed; 
 
    height: 12px; 
 
    width: 500px; 
 
    overflow: hidden; 
 
} 
 

 
.animation { 
 
    animation: loading 1.2s linear; 
 
    animation-iteration-count: infinite; 
 
    background-color: #e0e0e0; 
 
    height: 100%; 
 
    left: 0; 
 
    position: relative; 
 
    top: auto; 
 
    width: 300px; 
 
} 
 

 
@keyframes loading { 
 
    from {left: -30rem} 
 
    to {left: 110%} 
 
}

<div class="loading"> 
 
    <div class="animation"></div> 
 
</div>

Answer 2

calc()在IE浏览器不工作，你可以改变@keyframes到：

@keyframes loading { 
    from {left: -30rem} 
    to {left: 30rem} 
} 

你可以使用-moz-calc和它的工作，但说实话不是最好的事。

你的关键帧看起来像这样：

@keyframes loading { 
    from {left: -30rem} 
    to {left: -moz-calc(100% + 30rem)} 
}