使用calc的无限动画在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中的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()在IE中不起作用，您可以将@keyframes更改为：

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

您可以使用-moz-calc，它可以工作，但老实说这不是最好的选择。

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

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