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

BLOG

ブログ

UPDATE:2022.2.18

CATEGORY

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

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


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を利用することになります。
その時はブラウザ速度になるべく影響しないコーディングを心掛けたいですね。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

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

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE