Почему эта анимация CSS3 не работает в MS Edge или IE11?

Вот fiddle и ниже - код CSS (HTML - это просто эллипс SVG). Он работает в Chrome, Firefox и Opera, но не работает в IE и Edge. Что делать, чтобы увидеть анимацию в IE и Edge?Почему эта анимация CSS3 не работает в MS Edge или IE11?

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

источник

2017-01-07 camcam

По какой-то причине 'штрих-dashoffset' анимация не работает в IE. Но если вы используете 'stroke-dasharray', как в [этой демонстрации] (https://jsfiddle.net/vgh1xhbq/1/), то он будет работать по крайней мере в Edge. Это все равно не будет работать в IE11. – Harry

Отлично работает, спасибо! – camcam

Дубликат http://stackoverflow.com/questions/41470958/css-transition-doesnt-work-properly-in-chrome/41471277#41471277 –

Несмотря на то, что MSDN говорит от MS Краюstroke-dashoffset свойство анимируемым с CSS-анимации и переходов, это еще не работает по какой-то причине. Если мы заново создадим эту анимацию, используя stroke-dasharray вместо stroke-dashoffset, то она будет работать как ожидается в Edge.

Но это будет до сих пор не работают в IE11 или ниже, потому что снова, как указано в MSDN, то stroke-dasharray является анимируемым с помощью CSS анимации и переходы только из MS Edge.

Измененная анимация по-прежнему работает в последних версиях 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>

источник

2017-01-07 15:48:08 Harry

Почему эта анимация CSS3 не работает в MS Edge или IE11?

ответ

Смежные вопросы