より洗練されたCSSアニメーションが可能に！複数のビュー遷移を同時に実行できるスコープ付きビュー遷移の基本的な使い方

サイト構築 -CSS

Post on:2025年9月16日

sponsorsr

複数のビュー遷移を実行できるようにするスコープ付きビュー遷移の基本的な使い方を紹介します。

スコープ付きビュー遷移を使用すると、複数のビュー遷移を同時に実行できるようになり、レイヤー化の問題なども回避できます。

Scoped view transitions
by Bramus!

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

スコープ付きビュー遷移で、複数のビュー遷移が同時に実行できるようになります

スコープ付きビュー遷移（Scoped view transitions）は、View Transition APIの拡張機能として提案されたもので、DOMのサブツリーに対してビュー遷移を開始できるようにします。

Chrome 140以降でテスト可能で、chrome://flagsで「Experimental Web Platform features」のフラグを有効にすると利用できます。現在、デベロッパーの皆さまからのフィードバックを積極的に募集しています。

では、さっそくスコープ付きビュー遷移の基本的な使い方を解説します。

スコープ付きビュー遷移を開始するには、contain: layoutが適用されている任意のHTMLElementに対して、element.startViewTransition()を呼び出します。
※document.startViewTransition()ではありません。

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

document.querySelector('nav').startViewTransition({

callback: () => {

// … code that manipulates the contents of <nav>

})

その結果、選択したHTMLElementのサブツリーにスコープされたビュー遷移が生成され、::view-transition疑似ツリーがそのHTMLElementに挿入されます。このHTMLElementは遷移アニメーションのコンテナとして機能します。

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

html

├─ head

└─ body

├─ nav

│ ├─ ::view-transition

│ │ └─ ::view-transition-group(thing)

│ │ └─ ::view-transition-image-pair(thing)

│ │ ├─ ::view-transition-old(thing)

│ │ └─ ::view-transition-new(thing)

│ └─ ul

│ ├─ li

│ └─ li

└─ main

└─ …

スコープ尽き遷移を使用すると、複数のビュー遷移を実行できるようになります（ただし、遷移のルートが異なる場合に限ります）。ポインターイベントはドキュメント全体ではなく、そのサブツリーのみで防止されます（サブツリーは後で再有効化可能）。

さらに、遷移ルートの外側にある要素をスコープ付き遷移の上に描画することもできます。

実際の動作は、デモページでご覧ください。
※Chrome 140の場合はchrome://flagsで「Experimental Web Platform features」のフラグを有効にしてください。

See the Pen
Document-Scoped vs Element-Scoped View Transition by coliss (@coliss)
on CodePen.

デモページでは、ボタンをクリックすると、コンテナ内のドットを移動できます。これはドキュメントスコープのビュー遷移と要素スコープのビュー遷移の両方で実現可能であり、それぞれの動作の違いを確認できます。

スコープ付きビュー遷移では、遷移中にドットは親要素によってクリップされたままになります。さらに、ポップオーバーが表示されている間はドットがポップオーバーの上には描画されません。

元ネタは、下記ポストより。

If you thought we were done with View Transitions, guess again!

Chrome is working on “Scoped View Transitions” which allow you to scope a VT to a subtree of the DOM.

This unlocks things like concurrent VTs and prevents layering issues.

Thread on : https://t.co/io0D4LuBqB pic.twitter.com/qFKdI9vN20

— Bramus (@bramus) September 10, 2025