株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > CSSとJavascriptアニメーションの違い【どっちを使う?】

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

UPDATE : 2022.02.18

CATEGORY :
Sasayama
Sasayama

Sasayama

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


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


①CSS

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

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

【ブラウザの主なスレッド(※)】
●Main Thread(メインスレッド)
●Worker Thread(ワーカースレッド)
●Compositor Thread(コンポジタースレッド)
●Raster Thread(ラスタースレッド)
※スレッド…複数のタスクやプログラムを同時に実行することを指す単位

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

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


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



②Javascript

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

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


どちらを使う?

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

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

この記事を書いた人Who wrote this blog

Sasayama Sayaka

見て楽しいホームページ制作が得意です◎
元プログラマーのWEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design