CSS3 transition not firing with Zepto/jQuery addClass() in Firefox only

Question

Here is the jsFiddle : http://jsfiddle.net/ybGpJ/4/

This is frustrating. In Chrome and Safari, the transition fires just fine, but on Firefox, nothing is animated! Why is that?

This seems to be coming from the addClass() method. After bringing up the console in Firebug and toggling the class .scene (used to transition in my css) on and off, I can tell you that no animation happens. It just seems to toggle the visibility of the background image and h1.

However, if I toggle the checkbox for either the opacity or the transform (still in firebug), it animates just fine gaahhhh...

Can anybody help?

Answer 1

I performed the following steps to get your page to work in Firefox.

1. I removed .scene {overflow:hidden;}.
2. I added -moz-transition: all 1s ease-in-out; to both classes: .page-title and .animated-header-bg.
3. Final result: http://jsbin.com/amofih/1/watch

The above works in Firefox and Chrome in my testing. You can edit my changes here: http://jsbin.com/amofih/1/edit.

My changes were minimal and, IMO, not ideal. You have a lot of CSS transitions and transformations. You may want to look into find a more efficient way of creating the animation (maybe via a JS library).

Also, I know my addition of -moz-transition: all 1s ease-in-out; just overrode your transition definitions, but I thought it would still be helpful for you. Here you at least see that it can work in Firefox. There's probably just something wrong with your definitions. I'd search around as there are many examples you can use for reference.

• http://www.the-art-of-web.com/css/css-animation/#.UOhh8XePtLl
• http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/
• https://developer.mozilla.org/en-US/docs/CSS/transform
• https://developer.mozilla.org/en-US/docs/CSS/transition
• https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms