Firefoxでkeyframeアニメーションがカクカクしてしまう時の対処法

公開日:

こんにちは、れい@xxbicotです。
この間Animate.css & wow.jsを使っていたところ、とあるアニメーションがFirefoxで非常にカクカクとした挙動になることが発覚。
Firefoxはシェア率が低いためいつもスルーしてるんですが(2018/7時点だと6.43%らしい)、今回仕事でFirefoxの表示確認が必要だったので調べてみました。

結論から言えばwow.jsは関係なく、@keyframeの解釈が他のブラウザとFirefoxではちょっと異なることが原因でした。詳細をまとめておきたいと思います。

Firefoxでのカクカクとした挙動

今回は、Animate.cssでflipというアニメーションを使った時に発生しました。
flipは、本来だと以下のような挙動になります。


※これはgif画像

ところが、Firefoxだとこうなる。

半分回転したところで急に拡大、縮小してまた半分回転という動きになってしまっています。(Windows、Macどちらとも)
これは公式のデモの時点でこうなっていました。

調査

flipのAnimate.cssのコードはこちら。

※最新版のコードとちょっと違うかもですが対応方法は多分同じ

まず、css3アニメーションがおかしくなる原因を調べてみました。

  • Firefoxではanimation-delayに0を指定してると動かない→0sと書こう!
  • CSS3アニメーション属性の接頭語に「-moz-」がない→「-moz-」を追加しよう!
  • CPUだけで処理してるから遅くなってカクカクする→GPU処理にするためにtranslate3d使おう!

だいたいこんな理由が多いようです。
が、今回はあてはまらず。

アニメーションを見る限り、問題あるのは回転中に奥行き(Z軸)の移動がある箇所なので、奥行きに関係ある「perspective」と「translated3d」が何かしら関わってるのではと予想。
実際にprespectiveを全てコメントアウトすると、カクカクとした動きはなくなりました。

しかしperspectiveの値を調整しても一向に直る気配がない。。
親要素に適用できるperspectiveプロパティを使用すると滑らかになるけど軸が変わってしまう。。

などと苦戦していたのですが、こちらの記事をヒントにさらっと解決できました。

Firefoxはkeyframesで記述している着地地点に最短の動作をするため、他の地点でのプロパティの記述を省略すると、chromeでは滑らかに着地地点に向かって変化するのに対し、Firefoxは直線的に変化してしまうようです。
(こちらの記事ではsafariもカクカクしたようですが、今回はsafariは問題なくFirefoxでのみ事象を確認)

そのため、途中過程もしっかり記述を補強してあげることで無事直りました!
flipの記述の例だと以下でスムーズに動くようになりました。

※ゴリ押しなので、もしかしたらもっとスマートな記述で済むかもしれない

まとめ

この事象が起きない場合も多いかと思いますが、Firefoxでcssアニメーションがカクカクした動きになってしまう場合は、@keyframeの中継地点に気をつけよう!という話でした。

余談ですが、今回調べる中で結構いろんなサイトでFirefoxがカクカクしてました。やっぱり対応ブラウザから外してるところ多いのかな🤔

  • このエントリーをはてなブックマークに追加