爲什麼脈衝動畫在Edge上不能正常工作？

因此我在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; 
}

來源

2015-10-09 Soothsayer92

我不知道爲什麼邊緣有這個問題，SVG，但顯然改變動畫，只是普通的CSS（不包括SVG ）解決了這個問題。

來源

2015-10-15 14:49:13 Soothsayer92

爲什麼脈衝動畫在Edge上不能正常工作？

回答

相關問題