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

问题描述

我制作了这个动画，它在除IE和Edge之外的所有浏览器中都像魅力一样起作用.您可以在此处查看页面 https://jsfiddle.net/03ddygdx/

I made this animation and it's working like a charm in every browser but IE and Edge. You can see the page here 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中，不应用left属性，而将跨度始终保留在左侧.我已经尝试过-ms-animation属性，但这也不起作用.

In IE and Edge doesn't apply the left property, leaving the span always to the left. I've tried the -ms-animation property but that also doesn't work.

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

In case it matters I got this meta tag in my index.html

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

推荐答案

编辑:好的，问题是添加了calc()来计算left属性的大小，因此该错误已存在在那里.

Edit: Ok, the problem was adding a calc() to calculate the size of the left attribute, so the bug is in there.

编辑2 :我创建了有关此特定情况的错误报告，因此，如果有关于该特定情况的任何信息，我想您可以在此处"> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907 /

Edit 2: I created a bug report about this specific case, so if there is there any information about it I guess you could check it out here https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12872907/

在墙壁上撞了我几个小时后，事实证明它一定是ie-edge bug.将关键帧更改为此可以解决我的问题.

After hitting my head on the wall for a couple hours turns out it has to be a ie-edge bug. Changing the keyframes to this solved my problem.

@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边缘示例的内容 https://jsfiddle.net/vwty99s9/1/

Here is the working on ie-edge example https://jsfiddle.net/vwty99s9/1/

我想这些浏览器在将左值应用于动画时会遇到麻烦，因此只需将left更改为margin-left即可.

I guess these browsers have trouble applying left values on animations, so simply change left for margin-left and you're good to go.

这篇关于CSS关键帧动画无法在IE和Edge中正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！