CSSとJavascriptアニメーションの違い【どっちを使う？】

ホームページに様々な動きを与えるアニメーション。
ボタンにホバーした時のボタンの変化や、ハンバーガーメニューを開く時の動きなど、
これらのアニメーションには二つの実装方法があります。

CSSアニメーションとJavascriptアニメーション

①CSS

CSSのanimationプロパティなどを利用して表現するアニメーションです。
例えばマウスがホバーした時の変化などを簡単に実装することができ、処理が軽いのが特徴です。

少し専門的な話をすると、CSSアニメーションはメインスレッドではなくコンポジタースレッドによって処理されます。

※スレッド…複数のタスクやプログラムを同時に実行することを指す単位

メインスレッドって？
ブラウザがユーザーのイベントや描画を処理するところで、メインの名が付く通り一番忙しいスレッドです。
メインスレッドはレンダリングプロセスで「コンポジット」以外の工程で動きます。
メインスレッドでページ内のJavaScriptの処理をすべて行うので、
実行に時間がかかるJavaScriptを実行する場合ブラウザ全体の速度が低下します。

コンポジタースレッドって？
ブラウザがサーバーから受け取った情報を実際の画面に描画する処理（レンダリングプロセス）、
その最終工程である「コンポジット」でメインスレッドに代わって実行されるスレッドです。
忙しいメインスレッドとは別のスレッドなので、CSSアニメーションはJavaScriptアニメーションより処理が軽くなります。
（「コンポジット」ではコンポジタースレッドから依頼を受けてラスタースレッドも動きます）

一方でブラウザによっては対応していないプロパティがあるというデメリットがあります。
また、複雑なアニメーションはCSSのみでは表現できないので、Javascriptと併用する必要があります。

②Javascript

CSSアニメーションだけでは表現できない複雑なアニメーションを行うことができます。
例えばスクロールした時のパララックス（スクロール操作による視覚的エフェクト）の表現などはJavascriptを利用します。
また、JavascriptはCSSアニメーションを制御するのにも使われます。
ブラウザ毎に対応状況が違うことの多いCSSアニメーションと比べると、
各ブラウザ間の差異が基本的には発生しないのもJavascriptアニメーションの特徴と言えますね。

デメリットはCSSアニメーションに比べると処理が複雑になることです。
プログラミングの知識も必要になり、実装にも手間がかかります。
また、CSSの項目でも説明したメインスレッドでの処理となるのでブラウザ全体の速度にも大きく影響します。

どちらを使う？

マウスホバー時の表現やハンバーガーメニューを開くといったようなちょっとしたアニメーションは、処理が軽くなるCSSで対応するのがおすすめです◎

一方でスクロール時のパララックスや複雑なアニメーションになるとCSSアニメーションだけでは表現が難しいので、Javascriptを利用することになります。
その時はブラウザ速度になるべく影響しないコーディングを心掛けたいですね。