CSS 关键帧动画在 IE 和 Edge 中无法正常工作

Question

我制作了这个动画，它在除 IE 和 Edge 之外的所有浏览器中都运行良好。您可以在此处查看页面 https://jsfiddle.net/03ddygdx/

.progress-container {
  position: relative;
}

.background-progress-bar, .progress-bar {
  width: 100%;
  height: 10px;
  top: 0px;
  left: 0px;
  position: absolute;
}

.background-progress-bar {
  background-color: pink;
  z-index: 8;
}

.progress-bar { 
  background-color: red;
  z-index: 9;
}

.indeterminate {
  animation: indeterminate 2.5s infinite linear;
}

@keyframes indeterminate {
  0% {
    width: 30%;
    left: 0%;
  }
  25% {
    width: 50%;
    left: 50%;
  }
  50% {
    width: 10%;
    left: 0px;
  }
  75% {
    width: 30%;
    left: 0%;
  }
  100% {
    width: 0%;
    left: calc(100% - 5px);
  }
}

<div class="progress-container">
 <span class="background-progress-bar">
  <span class="progress-bar indeterminate"></span>
 </span>
</div>

在 IE 和 Edge 中不应用左侧属性，始终将跨度保留在左侧。我试过 -ms-animation 属性但这也不起作用。

以防万一，我在 index.html

中得到了这个元标记

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 1

编辑：好的，问题是添加一个 calc() 来计算左侧属性的大小，所以错误就在那里。

编辑 2：我创建了一个关于这个特定案例的错误报告，所以如果有任何关于它的信息，我想你可以在这里查看 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/

在我的头撞墙几个小时后，我发现它一定是一个 ie-edge 错误。将关键帧更改为此解决了我的问题。

@keyframes indeterminate {
  0% {
    width: 30%;
    margin-left: 0%;
  }
  25% {
    width: 50%;
    margin-left: 50%;
  }
  50% {
    width: 10%;
    margin-left: 0px;
  }
  75% {
    width: 30%;
    margin-left: 0%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}

这是在ie-edge上工作的例子https://jsfiddle.net/vwty99s9/1/

我猜这些浏览器在动画上应用左值有问题，所以只需将左更改为 margin-left 就可以了。

CSS 关键帧动画在 IE 和 Edge 中无法正常工作

CSS keyframe animation not working as intended in IE and Edge

html

css

internet-explorer

css-animations

microsoft-edge