Infinite animation using calc is not working in IE11 - html

Question

I have created a simple loading grid in my application, and added an animation over it. This animation seems to work in every browser except IE11.
Can somebody help me understand why it doesn't work and how to get it working 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: calc(100% + 30rem)}
}
<div class="loading">
<div class="animation"></div>
</div>
JSFiddle if you're interested: https://jsfiddle.net/9shufwsL/

Answer 1

Apparently calc() does not work in this context.
I changed the value of left in keyframes to use a percent based endpoint and it works 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() does not work in IE you could change the #keyframes to:
#keyframes loading {
from {left: -30rem}
to {left: 30rem}
}
you could use -moz-calc and it would work but honestly not the best thing to do.
your keyframes would look like so:
#keyframes loading {
from {left: -30rem}
to {left: -moz-calc(100% + 30rem)}
}