CSS vs JavaScript アニメーション 使い分けの基準

CSSアニメーションの得意領域

ホバー効果・状態変化 — :hover :focus :active などの擬似クラスとtransitionで完結。

繰り返し再生する装飾アニメ — ローディングスピナー、点滅、パルスなどのインジケータ。

シンプルなフェードイン・スライドイン — @keyframes で記述。

メリット — GPUレイヤーで自動最適化される。コードが宣言的でわかりやすい。

JavaScriptアニメーションの得意領域

マウス・スクロール・データに連動する動き — リアルタイムに値が変わる動きはJSが必要。

順番に発火させる連続アニメ — タイムライン管理が必要な複雑な演出はJSライブラリ（GSAP等）が圧倒的に楽。

ユーザー入力に応じた挙動 — フォーム値・スライダー値などに連動する動き。

メリット — 柔軟性が極めて高い。複雑な連携が可能。

使い分けの判断基準（フローチャート）

Step 1: 状態Aから状態Bへの単純な変化 → CSSで transition

Step 2: タイムライン上で複数の動作を順番に → CSSの @keyframes か、複雑なら JS

Step 3: 入力値（スクロール量・マウス位置）に連動 → JavaScript必須

Step 4: 大量の要素が同時に動く → GSAP / Lottie などの専用ライブラリ

Step 5: 物理シミュレーション（衝突・重力） → Three.js / Matter.js

パフォーマンス比較

transform/opacity のCSSアニメーション — 60fps を最も簡単に達成。GPU最適化が効く。

requestAnimationFrame の JS アニメーション — 60fps だが、メインスレッドで動くため重い処理と競合しやすい。

setInterval / setTimeout — アニメーションには使わない。フレームレートが不安定。

Web Animation API — CSS と JS の中間。JS から CSS Animation を制御する標準API。

ハイブリッドが最強

実際のプロダクションでは「CSS + JS」のハイブリッドが多用されます。

CSSでアニメーションを定義 → JSで .classList.add('animate') してトリガー、というパターンが定番。

本サイトのエフェクトも、このハイブリッドアプローチを採用しているものが多くあります。