IE11でCSS無限アニメーションが機能しない

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の値をkeyframesに変更し、パーセントベースのエンドポイントを使用し、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()あなたが@keyframesを変えることができるIEでは動作しません：あなたは-moz-calcを使用することができますし、それを行うための最善のことを動作しますが、正直なところではないでしょう

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

。

あなたのキーフレームがそうのようになります。

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