view-transition-name

アニメーション・エフェクト

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

構文

Syntax

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

コード例

例 1

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

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

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

例 2

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

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

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

例 3

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

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

💡 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対応状況を踏まえて、非対応ブラウザでも壊れないページ遷移アニメーションを設計して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

ブラウザサポート

Baseline 新しく利用可能（2025年10月〜）

Chrome

111+

Firefox

144+

Safari

18+

Edge