为什么脉冲动画在 Edge 上无法正常工作？答案

【问题标题】：Why does pulse animation dont work properly on Edge?为什么脉冲动画在 Edge 上无法正常工作？
【发布时间】：2017-02-07 07:45:07
【问题描述】：

所以我在 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;
}

【问题讨论】：

标签： html css animation css-animations microsoft-edge

【解决方案1】：

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

【讨论】：