CSS 边框动画适用于 Chrome、Firefox，但不适用于 Edge 15/IE 11

Question

更改 div 边框颜色的简单 css 动画适用于 Firefox 和 Chrome，但不适用于 Edge 15 或 IE 11。

我正在通过 browserstack 在 Edge 15 上进行测试。我试过玩前缀但没有任何运气。

div {
  animation: mymove 5s infinite;
}
@keyframes mymove {
  0% { left: 0px; border: 9px solid green; }
  100% { left: 200px; border: 10px solid blue; }
}

https://jsfiddle.net/wf95qxsm/2/

Answer 1

如果您在原始定义中定义起始属性，它在 IE11 中有效

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 5s infinite;
  /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
  border: 9px solid green;
  /* this */
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
  0% {
    left: 0px;
    border: 9px solid green;
  }
  100% {
    left: 200px;
    border: 10px solid blue;
  }
}

@keyframes mymove {
  0% {
    left: 0px;
    border: 9px solid green;
  }
  100% {
    left: 200px;
    border: 10px solid blue;
  }
}

<div></div>

CSS 边框动画适用于 Chrome、Firefox，但不适用于 Edge 15/IE 11

CSS border animation working in Chrome, Firefox, but not Edge 15/IE 11

css

cross-browser

css-animations