Web制作をしていると、「アニメーションはCSSでやるべきか、それともJavaScriptでやるべきか？」という判断に必ずぶつかります。どちらも同じように動きをつけられますが、役割と適した場面は明確に違います。
この記事では、その違いを本質的に整理します。
CSSアニメーションとは
CSSアニメーションは、スタイルだけで動きを実現する方法です。
主に以下の2つがあります。
transition（状態の変化に応じたアニメーション）
animation（キーフレームで定義するアニメーション）
特徴
記述がシンプル
ブラウザが最適化してくれるため軽い
スクロールやクリックなどの「状態変化」に強い
向いているケース
ホバー時の動き
フェードイン・スライドなどの単純な演出
UIのちょっとした動き
JSアニメーションとは
JavaScriptアニメーションは、プログラムで動きを制御する方法です。
代表的な手法としては以下があります。
requestAnimationFrame
ライブラリ（GSAPなど）
特徴
動きを細かく制御できる
状態・条件・時間などを自由に扱える
複雑なロジックと連動できる
向いているケース
スクロールに連動したアニメーション
複雑なタイミング制御
ユーザー操作に応じた動き
ゲーム的な表現
本質的な違い
一番重要なのはここです。
CSSは「状態の変化を補間するもの」
JSは「動きを制御するもの」
CSSは「A → B」の変化を滑らかにするための仕組みです。
一方、JSは「いつ・どう動くか」を自分で設計するものです。
つまり、
CSS → 受動的（状態が変わったら動く）
JS → 能動的（自分で動きを作る）
この違いを理解していないと、無駄にJSを書いたり、逆にCSSで無理をして破綻します。
パフォーマンスの違い
よく「CSSの方が軽い」と言われますが、これは半分正解です。
CSSが有利な理由
ブラウザがGPUを使って最適化する
レンダリングパイプラインに組み込まれている
ただし条件があります。
transform / opacity を使った場合のみ
これ以外（top, left, widthなど）を動かすと、CSSでも普通に重くなります。
判断基準（実務での結論）
迷ったら以下で判断するとブレません。
CSSでやるべきもの
単純な動き
UIの装飾
状態変化に応じた演出
JSでやるべきもの
複雑な動き
条件分岐がある
スクロール・時間・入力に依存する
複数要素の同期が必要
よくある間違い
① 何でもJSでやろうとする
→ 無駄に重くなるし、保守性も落ちる
② CSSだけで無理やり実現しようとする
→ 複雑になる、制御不能になる
③ パフォーマンスを理解していない
→ transformを使わずにカクつく原因を作る
結論
CSSとJSはどちらが優れているかではなく、役割が違います。
CSSは「シンプルで軽い演出」
JSは「ロジックを伴う動き」
この切り分けができるようになると、コードは一気に洗練されます。
逆にここが曖昧なままだと、無駄に複雑で重い実装になり続けます。
最後に
アニメーションは「見た目の派手さ」ではなく、「意図と設計」がすべてです。
どの技術を使うかではなく、
「なぜその動きを入れるのか」を先に決めること。
そこを外すと、どんなに技術を使っても価値は出ません。
