【CSS】アニメーションが不自然な動作をする時の対処法

CSSでアニメーションを行うと、古いブラウザやデバイスなどで表示するとよくアニメーションが不自然、カクカクしてしまうことがあります。

そのカクカクしてしまう原因から対処法までを今回の記事では説明します。

※この記事は「カクカク」を「チラつき」という表現で説明します。

チラつく原因

チラつく原因は、主にブラウザごとの「CSSの解釈」の違いが原因です。

(その他の原因として端末のメモリ不足などがあります。この記事ではその点には触れません)

例えば、古いブラウザ等は、その時代のサイトに合わせている部分もあります。なので、animationの解釈方法が分からずこのようなチラつきが発生してしまいます。

これは非推奨の方法です。

○○{
  transform: translate3d(0,0,0);
}

これは、動かない3D処理をCSSに入れて要素ごと処理を変えてもらう荒業です。

ですが、ブラウザに無駄な処理を与えてしまうほか、直らない場合が多いです。

「これで直ったからいいや！」

という方も、続きを読んでいただければ他にいい対処法があるかもしれませんので是非見てください。

今度の方法は、荒業ではなく、直接どのような処理をするのかブラウザに伝えることができます。

例えば、変形処理であれば

〇〇{
  will-change:transform;
}

アニメーションの場合は

〇〇{
  will-change:animation;
}

また、カンマ( , )で区切ることで複数指定することができます。

〇〇{
  will-change: transform,animation,position;
}

このwill-changeを利用することで効率的にブラウザに処理をしてもらうことができるようになります。

このプロパティは要素がユーザーに対して裏側を向いたときに、裏面を可視にするかどうかを設定するプロパティです。

これは上記でも直らなかった場合の最終手段としてご利用ください。

この記事では説明をしないので下記サイトを見ていただければ詳しく説明されています。

will-changeプロパティが推奨ですが、直らない場合はtranslate3d等も試してみていただけたらと思います。

Webサイトの対象範囲が広いかつアニメーション等をするのであれば設定は必須ですね。