CSS keyframe animation not working as intended in IE and Edge

问题

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>

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.

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

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

回答1:

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

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/

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

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

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

来源：https://stackoverflow.com/questions/45230153/css-keyframe-animation-not-working-as-intended-in-ie-and-edge

标签

html

css

internet-explorer

css-animations

microsoft-edge