为什么这个 CSS3 动画在 MS Edge 或 IE11 中不起作用？答案

【问题标题】：Why this CSS3 animation doesn't work in MS Edge or IE11?为什么这个 CSS3 动画在 MS Edge 或 IE11 中不起作用？
【发布时间】：2017-05-22 03:40:30
【问题描述】：

这里是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;
  }
}

【问题讨论】：

由于某种原因stroke-dashoffset 动画在 IE 中不起作用。但是，如果您像在this demo 中一样使用stroke-dasharray，那么它至少可以在Edge 中使用。它仍然无法在 IE11 中运行。
效果很好，谢谢！
重复stackoverflow.com/questions/41470958/…

标签： css svg css-animations

【解决方案1】：

尽管 MSDN 说 从 MS Edge 开始stroke-dashoffset 属性可以使用 CSS 动画和过渡进行动画处理，但它仍然不能出于某种原因工作。如果我们使用 stroke-dasharray 而不是 stroke-dashoffset 重新创建此动画，那么它在 Edge 中将按预期工作。

但它在 IE11 或更低版本中仍然无法工作，因为再次如 MSDN 所示，stroke-dasharray 可以使用 CSS 动画和仅来自 MS 的过渡进行动画处理边缘。

修改后的动画在最新版本的 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>

【讨论】：

【解决方案2】：

作为 MS Edge 的一种解决方法，您可以将 stroke-width 与 stroke-dashoffset 一起制作动画（对其值进行微小的变化）。例如，在问题的情况下：

@keyframes draw-first-shape {
    from {
        stroke-dashoffset: 1100;
        stroke-width: 3.03;
    }
    to {
        stroke-dashoffset: 0;
        stroke-width: 3;
    }
}

【讨论】：