View Transitions API による基本のクロスフェード

デフォルトのエフェクト：クロスフェード

document.startViewTransition(callback) を呼んでカスタムアニメーションを指定しない場合、ブラウザは取得した変更前と変更後のスナップショット間で 300ms のクロスフェード を実行します。これは最も低コストかつ汎用的なエフェクトで、view-transition-name で個別要素をオプトインしなくてもどんな DOM 変更でも動作します。

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

タイミングの調整

デフォルトの 300ms を上書きするには、ブラウザが自動生成する2つの擬似要素をターゲットにします:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
}

root 引数は、ブラウザが暗黙的に作る ルートスナップショットグループ を指します。view-transition-name を持たないすべての要素はこのグループに入り、ドキュメントレベルでクロスフェードします。

opacity トランジションより優れている理由

素朴な transition: opacity 300ms は要素を1つずつしかアニメーションできず、レイアウトに影響する変更（ノード追加、幅変更、テンプレート差し替え）では破綻します。View Transitions API は 可視ビューポート全体 をラスタースナップショットとして取得するため、リフローが激しい変更でもレイアウトエンジンを酷使せずにスムーズにアニメーションします。