T
css animations scroll-driven keyframes web-design

モダン CSS アニメーション：スクロール駆動、スプリング物理、そしてその先へ

ウェブアニメーションを次のレベルへ。CSS スクロール駆動アニメーション、スプリング物理、高度な三次ベジェタイミング関数について学びましょう。

2026-04-18

モダン CSS アニメーション：スクロール駆動、スプリング物理、そしてその先へ

アニメーションはもはや単なる「おまけ」の装飾ではありません。フィードバックを提供し、ユーザーの注意を誘導し、記憶に残るブランド体験を作成するための不可欠なツールです。

モダン CSS は、以前は複雑な JavaScript のスクロールリスナーや重いアニメーションライブラリを必要としていた要素のアニメーション化に、革命的な方法を導入しました。

1. スクロール駆動アニメーション：JS 不要

CSS アニメーションへの最もエキサイティングな追加機能は、スクロール駆動アニメーション (Scroll-Driven Animation) 仕様です。これにより、アニメーションの進行状況をコンテナのスクロール位置に直接リンクさせることができます。

仕組み：

以前は、window.onscroll と requestAnimationFrame が必要でした。今では、scroll-timeline を使うだけです。

@keyframes progress-bar {
  from { width: 0%; }
  to { width: 100%; }
}

.progress-indicator {
  animation: progress-bar linear;
  animation-timeline: scroll(); /* ページスクロールにリンク！ */
}

主なユースケース：

  • 読了状況インジケーター：ユーザーがどこまでスクロールしたかを表示。
  • パララックス効果：スクロールに合わせて背景要素を異なる速度で移動。
  • スクロールでの表示：view-timeline を使用して、要素がビューポートに入ったときにフェードイン。

2. 高度なキーフレームと合成

モダン CSS では、アニメーションをどのように組み合わせるかをより細かく制御できます。

  • animation-composition：同じプロパティに影響を与える複数のアニメーションをどのようにブレンドするか（例：replace、add、accumulate）を定義します。
  • animation-range：スクロール駆動アニメーションがビューポート内のいつ開始し、いつ終了するかを微調整します。
.card {
  animation: fade-in linear;
  animation-timeline: view();
  /* 要素が画面の中央 50% にある間だけアニメーション化 */
  animation-range: entry 25% exit 75%;
}

3. 線形を超えて：三次ベジェとスプリング物理

タイミング関数はアニメーションの「感触」を定義します。ease-in-out が標準的ですが、高度なデザインではカスタム曲線を使用します。

三次ベジェ (Cubic-Bezier)

三次ベジェ関数を使用すると、「オーバーシュート」や「アンティシペーション（予備動作）」効果を作成できます。

.button:active {
  /* わずかなバウンド効果 */
  transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

CSS スプリングアニメーション（実験的）

まだすべてのブラウザで完全にネイティブではありませんが、スプリング物理 (Spring Physics)（質量、剛性、減衰）の概念が CSS に導入されつつあります。これにより、従来の期間ベースのタイミングよりもはるかに自然で有機的な動きが作成されます。

4. パフォーマンス：60FPS ルール

滑らかなアニメーションの鍵は、「メインスレッド」を避けることです。モダン CSS アニメーションは高度に最適化されていますが、それは正しいプロパティをアニメーション化した場合に限られます。

アニメーション化しても安全なプロパティ：

  • transform (scale, rotate, translate)
  • opacity
  • filter (一部のブラウザ)

避けるべきプロパティ（レイアウトシフトの原因になります）：

  • width / height
  • margin / padding
  • top / left / bottom / right

5. ビュー遷移：DOM の変更をアニメーション化する

ビュー遷移 (View Transition) API と組み合わせることで、CSS は 2 つの状態間の要素の「モーフィング」を処理し、シームレスなアプリのような体験を作成できるようになりました。

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

FAQ：よくある質問

Q: スクロール駆動アニメーションはサポートされていますか？

A: 2024 年現在、Chrome と Edge でサポートされています。Firefox と Safari は開発中です。現在は「プログレッシブエンハンスメント」として使用できます。つまり、それらがなくてもサイトは機能しますが、あればより良く見えるという使い方です。

Q: アニメーションがカクつくのはなぜですか？

A: transform と opacity のみをアニメーション化しているか確認してください。また、アクティブな backdrop-filter 効果が多すぎないか確認してください。これらはパフォーマンス負荷が高くなる可能性があります。

Q: @scroll-timeline は使えますか？

A: 古い @scroll-timeline 構文は、より簡潔な animation-timeline: scroll() および view() 関数に置き換えられました。将来性を考慮して、新しい構文の使用をお勧めします。

サイトに命を吹き込む

アニメーションはモダンなユーザーインターフェースの「魂」です。スクロール駆動のタイムラインと高度なタイミング関数をマスターすることで、ユーザーがまた戻ってきたくなるような、プロフェッショナルで魅力的な体験を作成できます。

タイミングを完璧にしたいですか？三次ベジェジェネレーター（近日公開予定）を試すか、既存のアニメーションツールを使用してみてください。

ブログに戻る