使用 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() 在这种情况下不起作用。

我将keyframes 中的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)}
}