Firefox と古いブラウザへのグレースフルフォールバック

2層フォールバック戦略

最も堅牢なフォールバックは (1) 機能検出で未対応ブラウザは API を完全にスキップ、(2) 同じプロパティをアニメーションするベースラインの CSS transition を併設、の組み合わせです。これで Firefox ユーザーも なんらかの アニメーションを見ることができます。

function update() {
  document.body.classList.toggle('dark');
}

if (document.startViewTransition) {
  document.startViewTransition(update);
} else {
  update();
}

/* ベースライン CSS transition — 全ブラウザで動作 */
body {
  transition: background-color 200ms ease, color 200ms ease;
}

/* サポート時は View Transitions で上書き */
@supports (view-transition-name: none) {
  body {
    transition: none; /* 二重アニメーションを回避 */
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 300ms;
  }
}

@supports がここで効く理由

@supports (view-transition-name: none) クエリは View Transitions API を実装したブラウザでのみ true になります。transition: none 上書きをこの中にスコープすることで、View Transitions が引き継ぐタイミングで CSS フォールバックを正確にオフにします。

同一ドキュメント vs クロスドキュメント サポートの検出

const sameDoc = 'startViewTransition' in document;
const crossDoc = CSS.supports('selector(:active-view-transition)');

これら2機能はリリース時期が異なる（同一ドキュメントは Chrome 111、クロスドキュメントは Chrome 126）ため、両方を使うアプリでは独立して検出してください。

Firefox フラグ（2026年初頭）

Firefox は layout.css.view-transitions.enabled 越しに View Transitions をサポートします。サイト側からは有効化できませんが、リリースノートでパワーユーザー向けに案内できます。

ポリフィル？

View Transitions API には ポリフィルがありません。スナップショットメカニズムを JavaScript で再現するには canvas ベースのスクリーンショットが必要で、実用に耐えないほど遅いからです。CSS transition フォールバックが本番投入できる戦略です。