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)} 
}