为什么脉冲动画在 Edge 上不能正常工作？

Question

所以我在 Microsoft Edge 中遇到动画脉冲问题，首先我将描述我的目标是什么：我的动画是网站中间的脉冲点（改变宽度、高度）。它在任何地方都工作得很好，但在 Edge 中，点（当它动画时）它也会消失几毫秒。

HTML 片段

<div class="wrapper__index">      
        <a href="#hello"><img id="dot" class="wrapper__dot" src="images/pulsing_dot.svg" alt="Click to enter site"></a>
</div>

CSS 片段

.wrapper__index {
 display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox;      /* TWEENER - IE 10 */
 display: -webkit-flex;     /* NEW - Chrome */
 display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: center;
align-items: center;
height: 100%;
width: 100%; 
}

#dot {
align-self: center;
max-width:100%;
max-height:100%;

}

/****Dot animation*/

@keyframes pulse {
from {
    width: 70px;
    height: 70px;
}
to {
    width: 90px;
    height: 90px;
 }
}

#dot {
animation: pulse 1200ms ease-in-out infinite alternate;
}

Answer 1

我不知道为什么 Edge 对 svg 有这个问题，但显然将动画更改为普通 CSS（不包括 svg）解决了这个问题。

为什么脉冲动画在 Edge 上不能正常工作？

Why does pulse animation dont work properly on Edge?

html

css

animation

css-animations

microsoft-edge