ガイド: CSSだけで作るアニメーション

JSなしで「出現・弾み・時間差」を作るための3点セット。

出現の開始値 — @starting-style で display:none からのフェードイン @starting-style で popover を display:none からフェードイン
動きの質感 — linear() でスプリングイージング linear() でバネ（スプリング）イージングを CSS だけで書く
時間差 — sibling-index() でスタッガー sibling-index() で nth-child 地獄なしのスタッガーアニメーション
きっかけ（スクロールで発火） — animation-trigger で画面に入ったら再生 animation-trigger でスクロールトリガーアニメーションを CSS だけで
ページ遷移 — @view-transition { navigation: auto; } で MPA の遷移アニメ CSSだけでページ遷移アニメーション（MPA の View Transitions）

関連: スクロール位置に応じた目次ハイライト（:target-current）:target-current で目次の「いま読んでいる項目」をCSSだけでハイライト

組み合わせ例（リストを1件ずつ弾ませて表示）:

css

li {
  transition: opacity 0.4s, translate 0.6s var(--spring);
  transition-delay: calc(sibling-index() * 80ms);
}
@starting-style {
  li { opacity: 0; translate: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  li { transition: none; }
}

使い分けのめやす:

表示/非表示の切り替え → @starting-style
スクロールで「一度だけ／入ったら再生」→ animation-trigger（スクロール量に連動させたいなら animation-timeline: view()）
ページをまたぐ → View Transitions
どれも新しめの機能なので、@supports とプログレッシブエンハンスメント前提で。