このページは Cloud Translation API によって翻訳されました。

CSS スクロールトリガーアニメーションがまもなく登場します

Bramus

公開日: 2025 年 12 月 12 日

2023 年には、スクロールでアニメーションを進めたり巻き戻したりできるスクロールドリブンアニメーションをリリースしました。スクロールドリブンアニメーションでは、スクロールするとアニメーションの進行状況が 0% から 100% に進みます。スクロールを停止するとアニメーションが一時停止し、スクロールを上にスクロールするとアニメーションが逆方向に再生されます。

スクロールベースのアニメーションの次の章は 2026 年に始まり、スクロールトリガーアニメーションが Chrome 145 に導入されます。これらは、特定のスクロールオフセットを越えたときにトリガーされる時間ベースのアニメーションです。

このタイプのエフェクトでは IntersectionObserver は不要になりました。CSS で宣言的に記述できるようになりました。

タイムライントリガー、アニメーショントリガー、アクション

アニメーションをトリガーする

CSS でスクロールトリガーアニメーションを設定するには、まず要素に適用する通常の CSS アニメーションを作成します。

animation: unclip 0.35s ease-in-out both;

このアニメーションは DocumentTimeline をドライバとして使用し、0.35 秒間実行されます。アニメーションは、ページの読み込み後に自動的にトリガーされます。トリガーを変更するには、新しい animation-trigger CSS プロパティを使用します。

animation-trigger: --t play-forwards play-backwards;

ここでは、アニメーションはトリガー --t によってトリガーされるように設定されています。トリガーが有効になると、アニメーションで play-forwards アクションが呼び出され、トリガーが無効になると、play-backwards アクションが呼び出されます。

仕様には、アクションの完全なリストが含まれています。

トリガーを作成する

では、この --t トリガーとは何でしょうか。--t という名前のトリガーです。スクロールトリガーアニメーションの場合、これは「タイムライントリガー」で、スクロール進行状況タイムラインまたはビュー進行状況タイムラインをソースとして使用します。

タイムライントリガーを定義するには、timeline-trigger プロパティ（または関連する一括指定）を使用します。たとえば、ビュータイムラインをソースとして使用する --t という名前のトリガーを作成するには、次のようにします。

timeline-trigger-name: --t;
timeline-trigger-source: view();

このトリガー --t は、一致した要素に関連付けられたビューのタイムラインに基づいて有効化と無効化が行われます。ビューのタイムラインのデフォルトの範囲は cover 範囲であるため、トリガーは、その範囲内または範囲外にあるときにも有効または無効になります。

トリガーの範囲を調整する

トリガーが有効または無効になる位置を調整するには、トリガーで有効範囲とアクティブ範囲を指定します。次の例では、アクティベーション範囲が entry 100% exit 0% に設定されています。つまり、被写体がその範囲内に入るとトリガーがアクティブになります。

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

上記のスニペットではアクティブな範囲が指定されていないため、アクティブ化範囲がアクティブな範囲としても使用されます。アクティブな範囲外になると、トリガーは無効になります。

すでに定義されている animation-trigger と組み合わせると、対象がスクロールポートに完全に収まったときにアニメーションが順方向に再生され、スクロールポートから離れようとするときに逆方向に再生されるようになります。

トリガー範囲が entry 100% exit 0% に設定されたデモの録画。
デモには、範囲の開始位置と終了位置を示すデバッグ行も表示されます。

有効化範囲とアクティブ範囲は異なる場合があります。次に例を示します。

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

ここでは、サブジェクトが entry 100% exit 0% の範囲内にある場合にトリガーが有効になります。トリガーは、entry 0% exit 100% の範囲外になるまで有効なままです。

表示上は、対象がスクロールポートに入ったときにアニメーションが順方向に再生され、以前とは異なり、対象がスクロールポートから完全に離れるまでアクティブな状態が維持されます。

トリガー範囲が entry 100% exit 0% / entry 0% exit 100% に設定されたデモの録画。
デモには、範囲の開始位置と終了位置を示すデバッグ行も表示されます。アクティブ範囲がスクロールポートを囲んでいるため、デバッグ線が表示されません。

トリガーのスコープを制限する

トリガーはグローバルに可視です。つまり、特定の名前のトリガーを宣言する最後の照合が「勝ち」となります。トリガーの可視性を制限するには、trigger-scope プロパティを使用します。これは、anchor-scope の使用方法に似ています。

trigger-scope: --t; /* List of dashed idents, or `all` */

トリガーを宣言し、複数の要素に一致する CSS ルールがある場合は、trigger-scope を使用する必要があります。

デモ

次のデモでは、フォームがさまざまな全高セクションに分割されています。フォームの各部分がビューに表示されると、スクロールトリガーアニメーションを使用してアニメーション化されます。スクロールポートから離れると、アニメーションで消えます。

このスクロールトリガーアニメーションのロジックは次のとおりです。

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

コードを分解すると、次のようになります。

timeline-trigger は --t という名前で、ソースは一致する要素を追跡するビューのタイムラインに設定されています。
トリガーの有効範囲は contain 15% contain 85% です。被写体がその範囲内にある場合、トリガーが有効になります。
トリガーが有効になると、対象が entry 100% exit 0% の有効範囲内にある限り、トリガーは有効なままになります。
unclip アニメーションが要素に適用されます。
アニメーションは、トリガーソースとして --t を使用するように設定されています。トリガーがアクティブになると、アニメーションが順方向に再生されます。
トリガーが無効になると（被写体がアクティブな範囲から外れると）、アニメーションが逆再生されます。
カードの内容も、同じトリガー --t を使用してアニメーションで表示 / 非表示になります。

この例には、timeline-trigger をサポートしていないブラウザ向けに IntersectionObserver を使用したフォールバックが含まれています。

その他のデモ

スクロールトリガーアニメーションをさらに活用したい場合は、次のデモをご覧ください。

「Meet the monsters」デモの録画。

フィードバック

この機能を継続的に改善していくため、フィードバックをお待ちしております。フィードバックをお寄せいただくには、ソーシャルメディアでご連絡いただくか、CSS ワーキンググループに問題を報告してください。

バグが発生した場合は、Chromium バグを報告してください。既知のバグの一覧: Chromium Bug Tracker をご覧ください。