Firefox animation does not start with display style

Question

Fiddle http://jsfiddle.net/B9h8y/1/

In chrome, when I click on a document, the animation starts. In firefox, this is not the case.

Why doesn't the firefox trigger animation start when the display is set to block as in chrome?

<link rel="stylesheet" href="animate.min.css" /> <div class="el bounce animated"> The div </div> <script type="text/coffeescript"> $('.el').css(display: 'none') $(document).on 'click', -> $('.el').css(display: 'block') <script> 

Answer 1

After research and testing, the real question actually looks like this: "Why does WebKit wait to play the animation until the element appears." Both Firefox and Internet Explorer continue to play animations, even when they display: none; but WebKit browsers like Chrome and Safari are waiting. This commentary on the Mozilla bug comment on the related issue suggests that Firefox does it in such a way as to follow the spec, stating that in order to comply with Chrome's behavior, the spec will need to be changed.

Therefore, it seems that Firefox and Internet Explorer rightfully start the animation regardless of the display state, but WebKit instead prefers to optimize the rendering without starting the animation on the display: none; elements display: none; . Remember that WebKit still has no prefix for animation properties due to unresolved discrepancies.

I was unable to find another set of CSS rules that would achieve the desired result. I think your best way is to add an animation class to the click handler or use a class that sets the display value and enables the animation.

UPDATE:

apaul34208 provided JSFiddle to demonstrate this workaround.