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

我制作了这个动画，除了IE和Edge，它在每个浏览器中都像一个魔咒一样工作。你可以在这里看到这一页

.progress容器{
位置：相对位置；
}
.后台进度条，.进度条{
宽度：100%；
高度：10px；
顶部：0px；
左：0px；
位置：绝对位置；
}
.后台进度条{
背景颜色：粉红色；
z指数：8；
}
.进度条{
背景色：红色；
z指数：9；
}
.不确定{
动画：不确定2.5s无限线性；
}
@关键帧不确定{
0% {
宽度：30%；
左：0%；
}
25% {
宽度：50%；
左：50%；
}
50% {
宽度：10%；
左：0px；
}
75% {
宽度：30%；
左：0%；
}
100% {
宽度：0%；
左：计算（100%-5px）；
}
}

在IE和Edge中，不应用left属性，使跨度始终位于左侧。我尝试了-ms动画属性，但也不起作用

为了以防万一，我在index.html中得到了这个元标记

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

---

编辑：好的，问题是添加了一个calc（）来计算left属性的大小，所以bug就在那里

编辑2：我创建了一个关于这个特定案例的bug报告，所以如果有任何关于它的信息，我想你可以在这里查看

在我的头撞到墙上几个小时后，结果证明这一定是一个ie edge bug。将关键帧更改为此解决了我的问题

@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边缘的示例

我猜这些浏览器在动画上应用左值时会遇到问题，所以只需将left更改为marginleft，就可以了

@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%;
  }
}