フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

FireFoxで2回目のCSSアニメーションが動かない

特定の条件下で、FireFoxでは2回目のアニメーションが実行されません。 発生条件は、「アニメーションの実行時にその要素の親要素のdisplayがnoneからblockに変更されるような処理」の場合です。 入れ子にせず、その要素だけでアニメーションする場合は大丈夫でした。

デモ

対策としてはJSでreflowさせてあげれば良いかと思いますが、デモをFirefoxで開くとわかるとおり、offsetWidthやgetBoundingClientRectを取得してあげてもFirexoxは改善せず。諦めてcloneNodeして置き換えてあげるとうまくいくようです。

ちなみにこの時注意しなければならないのは、デベロッパーツールなど表示していると、何もしなくてもうまく動いてしまったりする事です。おそらくビジュアルでDOMを表示させるためにreflowが起っているのでしょう。(嘘かも)

jQueryの場合はwidth()を呼んであげれば一発で大丈夫でした。

CSSのみで解決するのは今のところ方法を発見できていません。。。