Question

我在我的应用程序中创建了一个简单的加载网格，并在其上添加了一个动画。这个动画似乎适用于IE11以外的所有浏览器。

有人可以帮助我理解为什么它不起作用以及如何让它在IE11中运行？

JFrame

.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)}
}

如果您感兴趣，可以使用JSFiddle：https://jsfiddle.net/9shufwsL/

Answer 1

显然calc()在这种情况下不起作用。

我更改了left中keyframes的值以使用基于百分比的端点，它在IE11中有效。

＆＃13;

.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%}
}

＆＃13;

<div class="loading">
  <div class="animation"></div>
</div>

＆＃13;

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)}
}

无限动画在IE11中无效

2 个答案: