cssアニメーションがカクカクするのを防ぐ方法

CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介！

「will-change」でGPUを使って高速処理

「will-change」を使うとアニメーションする前にブラウザに伝えてくれるので優先的に処理してくれる。ページに「will-change」を多用すると他の処理が遅くなるのでちょっと注意！
また「will-change」はIE11には対応しておらずIE11をサポートする場合は、別のプロパティを書く必要が出てくる。

CSS

// アニメーションする要素
.anime{
  // 動かすプロパティが一つだけの時
  will-change: transform;
  // 複数指定する場合は間に「 , 」
  will-change: top, left, opacity, margin, padding, width, height, transform;
}

「transform: translate3d(0,0,0)」でGPUを使って高速処理

ページ内の要素どれかに「transform: translate3d(0,0,0)」を書けば「重たい処理が行きますよ～」とブラウザに伝えてくれる。「will-change」と似ているが、「will-change」は特定プロパティだけを処理するのに対して「transform: translate3d(0,0,0)」はアニメーションにフルパワーを使うので、複数のアニメーションを行う際に他の処理がどうしても遅くなってしまう。

CSS

// ページ内にある要素
body{
  // ページ内のどんなアニメーションにも対応
  transform: translate3d(0,0,0);
}

「backface-visibility: hidden」を使って背面を消すことで処理を軽くする

「backface-visibility: hidden」は、上の２つとは違い要素の背面の描画を無くすことで処理の多くをアニメーションに向けられる。

CSS

// アニメーションする要素
.anime{
  // 見えない部分だけを消す
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation: .4s anime1;
}