Html CSS3脉冲效应在Firefox上不起作用

单击

div

时，我希望它具有脉冲效果

我已经为它做了准备

脉冲动画代码

@-moz-keyframes pulse_animation{
0% { -moz-transform: scale(1); }
    30% { -moz-transform: scale(1); }
    40% { -moz-transform: scale(1.08); }
    50% { -moz-transform: scale(1); }
    60% { -moz-transform: scale(1); }
    70% { -moz-transform: scale(1.05); }
    80% { -moz-transform: scale(1); }
    100% { -moz-transform: scale(1); }
}

---

它在Chrome上运行得很好，但在Firefox中不起作用。

您在动画名称周围添加了引号，这导致它失败，请尝试以下操作：

而且，在当前的firefox版本中，您不再需要-moz-前缀

---

您尚未为Firefox添加供应商前缀

-moz动画名称

，仅旧版Firefox需要此名称。最新的Firefox版本完全支持标准版本

@keyframes您的动画名称是w3c的标准和有效名称。你也应该包括它

它与最新的FF和最新的IE配合得很好。但是基于webkit的浏览器仍然需要前缀版本

@-moz-keyframes pulse_animation{
0% { -moz-transform: scale(1); }
    30% { -moz-transform: scale(1); }
    40% { -moz-transform: scale(1.08); }
    50% { -moz-transform: scale(1); }
    60% { -moz-transform: scale(1); }
    70% { -moz-transform: scale(1.05); }
    80% { -moz-transform: scale(1); }
    100% { -moz-transform: scale(1); }
}

-moz-animation-name: pulse_animation;