为什么此CSS3动画在MS Edge或IE11中不起作用? [英] Why this CSS3 animation doesn't work in MS Edge or IE11?

问题描述

这是小提琴，下面是CSS代码(HTML只是一个SVG椭圆).它可以在Chrome，Firefox和Opera中运行，但不能在IE和Edge中运行.如何在IE和Edge中查看动画?

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

推荐答案

即使MSDN表示 MS Edge 中的

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.

但是它仍将 在IE11中仍然无法工作 或更低，因为再次出现在

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.

修改后的动画仍可在最新版本的Chrome，Firefox和Opera中使用.

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>

这篇关于为什么此CSS3动画在MS Edge或IE11中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！