【CSS】アニメーション等動作がカクカクする時の対処法

始めに

参考にさせていただいた元記事

カクカクするのはブラウザごとに異なる

アニメーション時のチラつきの原因はほとんどが「アニメーション」として処理されていないということです。

一般的なブラウザ(Chrome,Firefox,Safari,Opera)の最新バージョンであればあまり気にする必要もないのですが、一部のデバイス内のアプリ等(cordova等)では古いバージョンのブラウザを使用している場合や、古いデバイスであると古いブラウザになってしまうでしょう。
(IEでもチラつきが目立つ。また、Edgeの場合もIEとほぼ変わらずチラつきがみられる。)

今回は一般的な3つの対処法を見ていきます。

対処法

1

サイトによっては

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

などというものもありますが、これはブラウザに無駄な処理を与えてしまっているため良い対処法ではない他、直らない場合もあるのでこれは軽く頭に入れておく程度でいいでしょう。

2

次の対処法は、will-changeです。
初めて聞く方もいると思いますが、will-changeを使用することで、要素にどのような変更を加えるかを先にブラウザに伝えることができます。

変形処理を伝えるときはこのようにします。

○○{
  will-change: transform;
}

また、アニメーションは次のようにします。

○○{
  will-change: animation;
}

さらに、複数の処理を同時に行うときはカンマ( , )で区切ることでまとめて記述することができます。

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

このようにすることで、translate3dのように不要な処理なく効率的に処理することができます。

3

また、この方法でも直る場合があります。

○○{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

この要素について詳しくはこちらを見ていただくといいと思います。
backface-visibility

最後に

一番最適な対処法は2番目のwill-changeです。

ですが、対応していないブラウザや、古いブラウザ、古いブラウザをベースにしているブラウザ等では対応していない場合もあるのでどの対処法も状態により使い分けるのがいいでしょう。