Question

单击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中却没有。

Answer 1

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

-moz-animation-name: pulse_animation;

此外，您不再需要使用当前firefox版本的-moz-前缀。

Moz guide to animations

Answer 2

您没有为Firefox添加供应商前缀。 -moz-animation-name仅适用于旧版Firefox。最新的Firefox版本完全支持标准版本。

@keyframes your_animation_name是w3c的标准和有效。你也应该加入它。

它适用于最新的FF和最新的IE浏览器。但是基于webkit的浏览器仍然需要前缀版本。

CSS3脉冲效果不适用于Firefox

2 个答案: