Web制作をしていると、「CSSだけでアニメーションを作れるのに、JavaScriptは必要？」という疑問を抱くことがありますよね。
CSSの進化によって、シンプルな動きはコードの負担なく実現できるようになりました。
しかし、すべてをCSSで解決するのは理想的でしょうか？
今回は、CSSとJavaScript、それぞれのアニメーションの役割や使いどころを詳しく解説します。
CSSとJavaScriptのアニメーション：それぞれの得意分野
CSSアニメーションの特徴
CSSアニメーションは、スタイルシートに記述するだけで、動きを簡単に実現できます。
特に、以下のような動きが得意です。
- ホバー時のエフェクト（例：ボタンの色変更やスケールアップ）
- スクロール時に適用されるフェードインやスライドイン
- ローディングスピナーやアイコンの簡単なアニメーション
軽量で、ブラウザの最適化が効くため、動作がスムーズなのが特徴です。
JavaScriptアニメーションの特徴
一方、JavaScriptは、動的で複雑な動きをコントロールするのに向いています。
たとえば、以下のケースで活躍します。
- スクロールに応じたパララックスエフェクト
- ユーザーの入力に応じたインタラクティブなアニメーション
- アニメーションの進行を詳細に制御したい場合（例：スライダーやゲームの動き）
JavaScriptは、条件分岐や動作のカスタマイズが必要な場面で力を発揮します。
CSSとJavaScriptの使い分けを解説
CSSアニメーションが適している場合
CSSは以下の条件に当てはまる場合に最適です。
- 簡単な動きで十分
- アニメーションの進行に複雑な条件が不要
- パフォーマンスを重視したい
例えば、ボタンホバーのアニメーションでは、CSSだけで十分効果的なデザインが実現できます。
JavaScriptが必要な場合
以下のような条件では、JavaScriptを使用する方が良い結果を得られます。
- ユーザーの動作や時間に応じてアニメーションを変化させたい
- アニメーションをシーンごとに分けて複雑に制御したい
- スクロール連動アニメーションなど、柔軟な設定が必要
JavaScriptのアニメーションライブラリ（例：GSAPやAnime.js）を使うことで、プロジェクトの品質を大幅に向上させられます。
事例：スクロール表示時にフェードインを実現する方法
CSSだけでの限界
CSSのみでフェードインを作る場合、アニメーション自体は簡単に設定できますが、「スクロール時に表示」という動作の制御は難しいです。
以下はCSSで設定する初期状態とアニメーションのスタイル例です。
See the Pen ScrollFadeInJavaScript&CSS by WithWhiz (@withwhiz) on CodePen.
HTML例
<div class="fade-in-box">表示されるとふわっと出現します！</div>
<div class="fade-in-box">この要素もフェードインします！</div>
<div class="fade-in-box">もうひとつの要素です。</div>CSS例
.fade-in-box {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-box.visible {
opacity: 1;
transform: translateY(0);
}CSSのままでは「スクロールして表示された時に」という設定ができません。
JavaScriptで実現するフェードイン
スクロール時に表示されるとフェードインするアニメーションを、JavaScriptで制御する例を見てみましょう。
JavaScript例
document.addEventListener("DOMContentLoaded", () => {
const fadeInElements = document.querySelectorAll(".fade-in-box");
const fadeInOnScroll = () => {
fadeInElements.forEach(element => {
const rect = element.getBoundingClientRect();
const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
if (isVisible) {
element.classList.add("visible");
}
});
};
// 初回チェック
fadeInOnScroll();
// スクロールイベントに追加
window.addEventListener("scroll", fadeInOnScroll);
});この仕組みでは、スクロール時に各要素の位置を判定し、表示範囲内に入った場合にクラスを追加することでアニメーションを発火させます。
CSSに動きを記述して、JavaScriptでは「何がどうした時にクラスを追加する」という制御を行うのがおすすめの実装方法です。
CSSとJavaScriptを使い分けて理想のアニメーションを作ろう
CSSとJavaScript、それぞれの特徴を理解することで、用途に合ったアニメーションを効率的に作成できます。
シンプルで軽量な動きにはCSSを。
複雑で柔軟な動きにはJavaScriptを。
必要な場面で適切なツールを使い分け、より魅力的なWeb体験を提供しましょう！
CSSのanimationについては以下の記事で紹介していますのでぜひ参考にしてみてください。
