# animation-timeline

> アニメーションの進行を時間ではなくスクロール位置に連動させるプロパティです（スクロール駆動アニメーション）。読了プログレスバーやパララックス、ビューポートに入ったら動き出す演出をJavaScriptなしで実装できます。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/animation-timeline/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/animation-timeline

## 構文

```css
animation-timeline: auto | none | scroll([<scroller>] [<axis>]) | view([<axis>] [<inset>])
```

## ブラウザ対応

- 対応が限定的
- Chrome 115+ / Firefox 未対応 / Safari 26+ / Edge 115+
- 補足: Firefox未対応（2026年7月時点）。非対応環境では通常表示になる前提で使う

## コード例

### 例1: ページのスクロール量に連動する読了プログレスバー

```css
.progress-bar {
  transform-origin: left;
  animation: grow linear;
  animation-timeline: scroll();
}

@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
```

### 例2: 要素がビューポートに入る間だけ進行するフェードイン

```css
.card {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

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

## TIPS

スクロール駆動ではanimation-durationは意味を持たないためautoのままでOK。進行範囲はanimation-range（entry/exit/cover等）で細かく制御できます。JSのIntersectionObserver+scrollイベントの組み合わせを丸ごと置き換えられます。

## よくある間違い

animationショートハンドはanimation-timelineをリセットするため、必ずanimationより後にanimation-timelineを書きます。Firefox未対応（2026年7月時点）なので、動かなくても内容が読める設計（プログレッシブエンハンスメント）が前提です。

## AIがよく間違えるポイント

AIはスクロール連動の実装にscrollイベント+JSやIntersectionObserverを提案しがちですが、CSSのanimation-timelineで完結する場面が増えています。AI生成コードの最頻バグは「animationショートハンドの後にanimation-timelineを書かずリセットされる」順序ミスです。Firefox未対応（limited）という対応状況もAIの知識では古いことが多く、必ず現在の対応状況を確認してください。

## AIへの依頼文例

- ページ上部に読了プログレスバーをJSなし・animation-timeline: scroll()で実装して。Firefox非対応でも壊れないように
- スクロールでカードが順にフェードインする演出を、IntersectionObserverではなくanimation-timeline: view()で書いて
- このscrollイベントベースのパララックスをスクロール駆動アニメーションに移行できるか評価して

## 関連プロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [keyframes](https://www.css-dictionary.com/property/keyframes.md)
- [scroll-behavior](https://www.css-dictionary.com/property/scroll-behavior.md)
- [will-change](https://www.css-dictionary.com/property/will-change.md)
- [at-starting-style](https://www.css-dictionary.com/property/at-starting-style.md)