html - CSS3脉冲效果在Firefox上不起作用

我想在div上单击时产生脉冲效果。

我为此做了一个jsfiddle。

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

脉冲动画代码

@-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中却无法运行。

最佳答案

您在动画名称周围添加了引号，从而使其失败，请尝试以下操作：http://jsfiddle.net/MrdvW/593/

-moz-animation-name: pulse_animation;

另外，当前的Firefox版本不再需要-moz-前缀。

Moz guide to animations

关于html - CSS3脉冲效果在Firefox上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24053052/