Firefoxでcss3アニメーションが動作しないときの対処方法

FirefoxにSelenuim IDEをインストールして、改修中のWebサイトのテストケースを作成しようとしたところ、CSS3のアニメーションが動作しない。
ChromeやSafariでは問題なく動作するので、「何故動かん？」と原因について調査したので、対処方法についてまとめました。

対処方法

CSS3アニメーション属性の接頭語に「-webkit」が指定されていたので、「-moz」に変更する

一部JavaScript（jQuery）で動的に設定している箇所があったので、下記の通り修正
また、トランジション終了後のbindが実行できていなかったので「webkitTransitionEnd」から「transitionend」に変更

• 修正前

$("#menuContainer").css({
    '-webkit-transform':'translate3d(350px,0,0)', 
    '-webkit-transition':'-webkit-transform 400ms cubic-bezier(0,0,0.25,1)'
}).bind('webkitTransitionEnd', function(){
    // トランジション終了後の処理を記述

});

• 修正後

$("#menuContainer").css({
    '-moz-transform':'translate3d(350px,0,0)', 
    '-moz-transition':'-moz-transform 400ms cubic-bezier(0,0,0.25,1)'
}).bind('transitionend', function(){
    // トランジション終了後の処理を記述

});

参考URL

http://memopad.bitter.jp/w3c/css3/css3_animations.html
http://blog.webcreativepark.net/2013/04/13-174122.html