Question

所以我在Microsoft Edge中遇到动画脉冲的问题，起初我将描述我的目标是什么：我的动画是在网站中间的脉冲点（改变widht，高度）。在任何地方它都是完美的，但在Edge中（虽然它是动画的）它也消失了几毫秒。

HTML SNIPPET

<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 SNIPPET

.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上不能正常工作？

1 个答案: