Why this CSS3 animation doesn't work in MS Edge or IE11?

问题

Here is the fiddle and below is the CSS code (the HTML is just an SVG ellipse). It works in Chrome, Firefox and Opera, but doesn't work in IE and Edge. What to do to see the animation in IE and 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;
  }
}

回答1:

Even though MSDN says that as of MS Edge the stroke-dashoffset property is animatable with CSS animations and transitions, it still doesn't work for some reason. If we re-create this animation using stroke-dasharray instead of stroke-dashoffset then it works as expected in Edge.

But it will still not work in IE11 or lower because again as indicated in MSDN, the stroke-dasharray is animatable using CSS animations and transitions only from MS Edge.

The modified animation still works in latest versions of Chrome, Firefox and 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:

As a workaround for MS Edge, you can animate stroke-width (making a tiny variation of its value) together with stroke-dashoffset. For instance, in the case of the question:

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

来源：https://stackoverflow.com/questions/41521573/why-this-css3-animation-doesnt-work-in-ms-edge-or-ie11

标签

css

css3

svg

css-animations