css - Firefox animation not starting on toggle display style

Question

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

In chrome when I click the doc the animation runs. In firefox it doesn't.

Why doesn't firefox trigger css animations when display is set to block like 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 appears to be, "Why does WebKit wait to play the animation until the element is displayed." Both Firefox and Internet Explorer continue to play the animation, even when it is display: none;, but WebKit browsers such as Chrome and Safari wait. This Mozilla bug report comment on a related issue suggests that Firefox does it this way in order to follow the specification, stating that matching Chrome's behavior would require changing the specification.

So it seems that Firefox and Internet Explorer are rightfully running the animation regardless of the display state, but WebKit is instead choosing to optimize the rendering by not running animation on display: none; elements. Remember that WebKit still has yet to un-prefix the animation properties because of unresolved discrepancies.

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

UPDATE:

apaul34208 has provided a JSFiddle to demonstrate this workaround.