MS EdgeやIE11でこのCSS3アニメーションが動作しないのはなぜですか？

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エッジのようstroke-dashoffsetプロパティは、CSSアニメーションやトランジションとアニメーション可能であることを述べているにもかかわらず、それは、まだいくつかの理由でを動作しません。 stroke-dashoffsetの代わりにstroke-dasharrayを使用してこのアニメーションを再作成すると、Edgeで期待どおりに動作します。

しかしMSDNに示すように、再び、stroke-dasharrayのみMSエッジからのCSSアニメーションやトランジションを使用してアニメーション可能であるため、それはまだIE11以下では動作しません。

修正されたアニメーションは、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>

何らかの理由で