css - 为什么此 CSS3 动画在 MS Edge 或 IE11 中不起作用？

Question

这是fiddle下面是 CSS 代码(HTML 只是一个 SVG 椭圆)。它适用于 Chrome、Firefox 和 Opera，但不适用于 IE 和 Edge。如何在IE和Edge中看到动画？

#my-circle {
  stroke: blue;
  stroke-dasharray: 1100;
  stroke-dashoffset: 500;
  -moz-animation: draw-first-shape 1s forwards 3;
  -webkit-animation: draw-first-shape 1s forwards 3;
  animation: draw-first-shape 1s forwards 3;
}

@-moz-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

尽管 MSDN 说 自 MS Edge stroke-dashoffset属性可以使用 CSS 动画和过渡进行动画处理，它 还是不行因为某些原因。如果我们使用 stroke-dasharray 重新创建此动画而不是 stroke-dashoffset然后它在 Edge 中按预期工作。

但它会仍然无法在 IE11 中工作 或更低，因为再次如 MSDN 所示, stroke-dasharray仅使用 MS Edge 的 CSS 动画和过渡可动画化。

修改后的动画仍然适用于最新版本的 Chrome、Firefox 和 Opera。

#my-circle {
  stroke: blue;
  stroke-dasharray: 1100;
  stroke-dashoffset: 0;
  animation: draw-first-shape 1s forwards 3;
}
@keyframes draw-first-shape {
  from {
    stroke-dasharray: 0, 1100;
  }
  to {
    stroke-dasharray: 1100, 1100;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500.00001 300" id="svg2">
  <g id="layer1" transform="translate(0 -752.362)">
    <ellipse id="my-circle" cx="257.013" cy="907.735" rx="201.742" ry="111.465" fill="#fff" stroke="#007400" stroke-width="3" />
  </g>
</svg>