# view-transition-name

> View Transitions APIで、状態変化の前後で「同じ要素」として扱う名前を付けるプロパティです。一覧→詳細への画像モーフのような遷移アニメーションを、ブラウザが前後のスナップショットから自動生成してくれます。

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

## 構文

```css
view-transition-name: none | <custom-ident>
```

## ブラウザ対応

- Baseline 新しく利用可能（2025年10月に全主要ブラウザ対応）
- Chrome 111+ / Firefox 144+ / Safari 18+ / Edge 111+
- 補足: 同一ドキュメント遷移はBaseline。別ページ遷移（@view-transition）はChrome 126+/Safari 18.2+でFirefox未対応（2026年7月時点）

## コード例

### 例1: 名前を付けた要素が変化の前後で滑らかにモーフする

```css
.hero-image {
  view-transition-name: hero;
}

/* JS側: 状態変化をトランジションでラップ */
/* document.startViewTransition(() => updateDOM()); */
```

### 例2: 擬似要素で遷移アニメーション自体をカスタマイズ

```css
::view-transition-old(hero) {
  animation-duration: 0.25s;
}

::view-transition-new(hero) {
  animation-duration: 0.25s;
}
```

### 例3: 通常のページ遷移（MPA）でもクロスフェードを有効化

```css
/* MPA（別ページへの遷移）で有効化 */
@view-transition {
  navigation: auto;
}
```

## TIPS

same-document（SPA的な状態変化）はJSのdocument.startViewTransition()とセットで使います。名前はページ内で一意である必要があるため、一覧アイテムにはview-transition-name: auto（またはJSで動的付与）を検討します。

## よくある間違い

同時に同じview-transition-nameを持つ要素が2つあると遷移がスキップされます。また遷移中はスナップショット画像が動くため、遷移前後で要素の中身が変わるUIではレイアウトずれに見えることがあります。

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

AIは画面遷移アニメーションにFLIPテクニックやアニメーションライブラリ（Framer Motion等）を提案しがちですが、view-transition-name + startViewTransition()なら数行で済みます。クロスドキュメント（MPA）対応の@view-transitionはChrome 126+/Safari 18.2+でFirefox未対応（2026年7月時点）という段階差があり、AIはこの差を混同して全部使える/全部使えないと誤答しがちです。

## AIへの依頼文例

- 商品一覧のサムネイルをクリックすると詳細ページの大きな画像にモーフするView Transitionを実装して
- このSPAのタブ切替にdocument.startViewTransition()とview-transition-nameでクロスフェードを付けて
- View TransitionsのMPA対応状況を踏まえて、非対応ブラウザでも壊れないページ遷移アニメーションを設計して

## 関連プロパティ

- [animation](https://www.css-dictionary.com/property/animation.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [at-starting-style](https://www.css-dictionary.com/property/at-starting-style.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)