CSS unendliche Animation funktioniert nicht in IE11

Question

Ich habe ein einfaches Laden von Raster in meiner Anwendung erstellt und eine Animation darüber hinzugefügt. Diese Animation scheint in jedem Browser außer IE11 zu funktionieren.

Kann mir jemand helfen zu verstehen, warum es nicht funktioniert und wie es in IE11 funktioniert?

.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 wenn Sie interessiert sind: https://jsfiddle.net/9shufwsL/

Answer 1

Offenbar calc() funktioniert nicht in diesem Zusammenhang.

Ich habe den Wert left in keyframes geändert, um einen prozentbasierten Endpunkt zu verwenden, und es funktioniert in 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() funktioniert nicht in IE Sie die @keyframes ändern könnte:

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

Sie -moz-calc verwenden könnte und es funktionieren würde, aber ehrlich gesagt nicht das Beste, was zu tun .

Ihre Keyframes würde wie so aussehen:

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