【CSS】要素が画面に入ったことをトリガーに動くCSSアニメーション「Scroll Trigger Animation」とは？

はじめに

みなさんは、「Scroll Trigger Animation（スクロールトリガーアニメーション）」を知っていますか？

スクロールトリガーアニメーションは、2025年12月12日にChrome for Developersのブログで公開された、新しいスクロールベースのアニメーションです。

今までは、Intersection Observer API を使って実装していたような、要素がViewportに入ったことをトリガーにしたアニメーションをCSSだけで実装できるようになります。

そのため、この記事では、そんな「Scroll Trigger Animation（スクロールトリガーアニメーション）」の基本的な使い方・プロパティについて紹介します。

Scroll Trigger Animation（スクロールトリガーアニメーション）

Scroll Trigger Animationは、今までIntersection Observer API を使って実装していた、要素がViewportに出入りすることをトリガーにアニメーションを開始させることができるCSSプロパティです。

サンプル

以下のサンプルは、Chrome Canary 145以降のバージョンで確認してください 🙏（2025年12月18日時点）

See the Pen scroll trigger animation by degudegu2510 | Qiita (@degudegu2510) on CodePen.

Scroll Trigger Animationがサポートされてない方は、以下の動画で確認してください。

実装方法

「Scroll Trigger Animation（スクロールトリガーアニメーション）」を実装するには、以下のステップに合わせて、実装してください。

1. アニメーションを定義する

まずは、アニメーションを定義します。
ここでアニメーションさせたい要素が画面内に入った時にどのようなアニメーションをさせるかを定義します。

@keyframes item-anime {
  from {
    opacity: 0%;
    width: 50px;
  }
  to {
    opacity: 100%;
    width: 300px;
  }
}

.item {
  animation: item-anime 0.5s ease-in-out both;
}

上記の例では、@keyframes item-animeでアニメーションさせるプロパティを決め、.item に animation プロパティを指定することで、アニメーションさせる要素を決めています。

2. アニメーションのトリガーを定義する

次は、アニメーションをスタートさせるトリガーを定義します。

@keyframes item-anime {
  from {
    opacity: 0%;
    width: 50px;
  }
  to {
    opacity: 100%;
    width: 300px;
  }
}

.item {
  animation: item-anime 0.5s ease-in-out both;
+ timeline-trigger:
+   --t /* timeline-trigger-name */
+   view() /* timeline-trigger-source */
+   contain 10% contain 90% / entry 100% exit 0% /* トリガーで有効にする範囲 */
+ ;
}

上記の例では、timeline-trigger プロパティを使って、timeline-trigger-name・timeline-trigger-source・トリガーで有効にする範囲 を定義しています。

• timeline-trigger-name：timeline-triggerの名前を決める
• timeline-trigger-source：スクロールの基準を決める
  • 基本的には、ビュー進行状況タイムライン(view()) を使う
• トリガーで有効にする範囲：アニメーションをスタートさせる位置を決める
  • ここで定義する値については下記のセクションを参照してください

3. アニメーショントリガーを作る

最後に、アニメーショントリガーを作り、スクロールに合わせてアニメーションさせるようにします。

@keyframes item-anime {
  from {
    opacity: 0%;
    width: 50px;
  }
  to {
    opacity: 100%;
    width: 300px;
  }
}

.item {
  animation: item-anime 0.5s ease-in-out both;
  timeline-trigger: --t view() contain 10% contain 90% / entry 100% exit 0%; 
+ animation-trigger: --t play-forwards play-backwards;
}

上記の例で追加した animation-trigger プロパティは、timeline-trigger-nameと アニメーションの状態を定義します。

• play-forwards：再生速度を正に設定する
• play-backwards：再生速度を負に設定する

覚えておくといいかも...

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

トリガーが反応するスコープを制限したい場合は、trigger-scope が使えます。

.item {
  trigger-scope: --t;
}

上記のように記載するすることで、複数の要素で同じトリガーを使い場合に使ってください。

See the Pen scroll trigger animation - sample 1 by degudegu2510 | Qiita (@degudegu2510) on CodePen.

⚪︎ トリガーで有効にする範囲について

① cover
cover は、スクロールポートの全範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上入ってから、要素が完全に出るまでアニメーションします。

② entry
entry は、スクロールポートに要素が見える範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上入ってから、全要素が見えるようになるまでアニメーションします。

③ exit
exit は、スクロールポートに要素が見えなくなる範囲がアニメーション範囲になります。
そのため、要素がスクロールポートに1px以上出てから、全要素が見えなくなるまでアニメーションします。

④ entry-crossing
entry-crossing は、スクロールポートの終了境界エッジを横切っている範囲がアニメーション範囲になります。
そのため、スクロールコンテナーの終了境界エッジを要素が重なり始めてから、終わるまでアニメーションします。

⑤ exit-crossing
exit-crossing は、スクロールポートの開始境界エッジを横切っている範囲がアニメーション範囲になります。
そのため、スクロールコンテナーの開始境界エッジを要素が重なり始めてから、終わるまでアニメーションします。

⑥ contain
contain は、要素がスクロールポートに入っている範囲がアニメーション範囲になります。
そのため、全要素がスクロールポート内に入ってから、要素がで始めるまでアニメーションします。

また、細かい指定は、↓こちらのscroll-driven-animationsジェネレーターを触りながら、調整するのがわかりやすいと思います。

まとめ

この記事では、2025年12月12日にChrome for Developersのブログで公開された、新しいスクロールベースのアニメーションのスクロールトリガーアニメーションを紹介しました。

このプロパティが使えるようになったら、Intersection Observer API を使って実装していたような、要素がViewportに入ったことをトリガーにしたアニメーションをCSSだけで実装できるようになります。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。