animation-trigger でスクロールトリガーアニメーションを CSS だけで

timeline-trigger でトリガーを定義し animation-trigger で紐づけると、Intersection Observer なしで「画面に入ったら再生」ができる。

どんな時に使う？

カードや見出しが画面内に入ったときにフェードインさせる、よくある演出。
Scroll-driven Animations（animation-timeline: view()）はスクロール量に連動して進むだけで「一度再生したら最後まで流す」ができなかった。animation-trigger はその弱点を補う。

コード

css

@keyframes fade-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

.card {
  /* 1. トリガーを定義: 名前 / ソース(view) / 発火範囲 / 解除範囲 */
  timeline-trigger: --t view() contain 15% contain 85% / entry 100% exit 0%;

  /* 2. アニメーションとトリガーを紐づけ */
  animation: fade-in 0.8s ease both;
  animation-trigger: --t play-forwards play-backwards; /* 入ったら再生、出たら逆再生 */

  /* 3. 名前 --t をこの要素内に閉じ込める（同名が複数あっても干渉しない） */
  trigger-scope: --t;
}

主な動作キーワード: play / play-once / play-forwards / play-backwards / pause / reset / replay。
一度だけ再生したいなら animation-trigger: --t play-once; のように書く。

注意点・対応状況

Chrome 146 から利用可能（2026年3月リリース）。他ブラウザは Can I use で要確認。
未対応ブラウザではアニメーションの扱いが変わる可能性があるので、@supports (animation-trigger: --t play) で囲むなどプログレッシブエンハンスメントで。
prefers-reduced-motion: reduce では無効化を。

出典

@tak_dcxi · 2026-03-11 （引用元のデモ投稿: @tak_dcxi · 2026-02-22 ）
@azukiazusa9 · 2026-03-12 （解説記事: azukiazusa.dev ）