Problème de transition Firefox

Bonjour à tous,

En créant un petit "snippet" je n'arrive pas à comprendre pourquoi les animations qui marche parfaitement sous les navigateurs webkit, bug sous firefox, (je n'ai pas osé regarder sur ie).

Voici le lien cssdeck du bazar. Cssdeck préfixant automatiquement mon code normalement, le soucis ne devrait pas venir de là.

Mon hypothèse, qui demande à être vérifié :
J'utilise un script js simple pour changer la classe de ma div au click, peut être que le changement "brutal" de classe n'est pas pris en compte par Firefox pour lancer les transitions.

En vous remerciant de m'avoir lu,
Bonne journée,

JB

Petit rajout, je voulais avoir votre avis sur les animations.

J'ai remarqué que les animations css3 même simple et l'utilisation de "fonctions" css3 poussé/expérimental comme les filtres, prennent vite des ressources sur mon ordi (ce n'est pas un foudre de guerre mais il est surement dans la moyenne des utilisateurs cible de mes sites), je n'est pas encore testé l'utilisation des animations js pour comparer.

Dans le cadre d'animations "esthétiques" apportant un intérêt limité mais tout de même appréciable, vaut il mieux pour l'instant (dans l'état actuel des techno CSS3/HTML5) utilisé le css3 ou le js? Mes critère de selection sont tout d'abord les performances et deuxièmement l'aspect cross-broswer de la chose.

EDIT : http://css-tricks.com/myth-busting-css-animations-vs-javascript Cet article répond parfaitement à ma question. Par contre ma question de départ persiste, si quelqu'un à un piste de réponse.
Modifié par 6l20 (11 Mar 2014 - 00:03)