View Transitions API ジェネレーター

View Transitions API は、低レベルなアニメーションコードを書かずに DOM の2つの状態間を補間できるブラウザ機能です。document.startViewTransition(callback) を呼ぶと、ブラウザがページのスクリーンショットを撮影 → コールバック（DOM 操作）を実行 → 2枚目のスクリーンショットを撮影 → ::view-transition-old() と ::view-transition-new() の擬似要素内でクロスフェードします。@keyframes でクロスフェードを上書きすることで、スライド・スケール・共通要素トランジションも実現できます。Chrome 111（2023年3月）、Safari 18（2024年9月）でリリースされ、Firefox は2026年初頭時点でフラグ越し対応です。

同一ドキュメントトランジション（このジェネレーターが生成する種類）は、Chrome 111+・Edge 111+・Opera 97+・Safari 18+ で動作します。Firefox は layout.css.view-transitions.enabled プリファレンスでフラグ越し対応していますが、デフォルトでは無効です。クロスドキュメントトランジション（MPA ナビゲーション間）は新しめで、Chrome 126+・Safari 18+ で対応しています。常に `if ('startViewTransition' in document)` でラップして、未対応ブラウザでは即時 DOM 切り替えにフォールバックさせてください。ジェネレーターのバナーはまさにこの検出を使っています。

SPA（シングルページアプリケーション）トランジションは document.startViewTransition(callback) という JavaScript API を使います。React/Vue/Svelte のルートハンドラ内や任意のステート変更箇所で呼び出します。MPA（マルチページアプリケーション）トランジションは CSS のみで、ソース側と遷移先の両ページに @view-transition { navigation: auto; } を追加するだけで、同一オリジンのナビゲーションをブラウザが自動的にアニメーション化します。SPA トランジションはより柔軟（ナビゲーション以外のステート変更にも使える）ですが JavaScript が必要で、MPA トランジションは JS ゼロですが同一オリジン内のフルナビゲーションでしか発火しません。

最もシンプルな例: `if (document.startViewTransition) { document.startViewTransition(() => { document.body.classList.toggle('dark'); }); } else { document.body.classList.toggle('dark'); }` です。else ブランチは Firefox や旧ブラウザのフォールバックで、アニメーションなしで操作だけ実行します。返却された Promise をチェーンすることもできます: `const t = document.startViewTransition(updateDom); await t.ready; // アニメーション開始; await t.finished; // 終了` 。ready Promise は、スナップショット擬似要素に Web Animations API のチューニングを後乗せしたいときに便利です。

各 view-transition-name は、単一のページスナップショット内の表示中要素間で一意である必要があります。document.startViewTransition() 実行時に同じ名前の要素が2つあると、トランジション全体がスキップされ警告がログに出ます。つまりリスト内の全カードに view-transition-name: card を付けることはできず、view-transition-name: card-${id} のようにアイテムごとに固有の名前を生成する必要があります。ページやルート間の共通要素トランジションでは、ソースと遷移先の両方の要素に同じ名前を付けると、ブラウザがそれらをモーフィングします。どちらか片方に名前がない場合、その要素はクロスフェードグループにフォールバックします。

常に `if (document.startViewTransition)` で機能検出し、else ブランチでアニメーションなしで DOM 操作を実行してください。MPA スタイルのトランジションでは、@view-transition ルールは理解できないブラウザでは静かに無視されます。視覚的なフォールバック（Firefox でも何らかのアニメーションを残したい場合）として、要素自体に CSS transition をレイヤーする方法があります。View Transitions API が動作するときはスナップショットがライブ要素を置き換えるため CSS transition は二重発火しません。動作しないときは CSS transition がそのまま動きます。この「プログレッシブエンハンスメント2層構造」が最も堅牢な戦略です。

はい。このジェネレーターは純粋な CSS、View Transitions API、React のステートだけでブラウザ内で完結します。トランジション名・duration・easing カーブ・生成コードがサーバーに送信されることは一切ありません。サポートバナーはローカルの `'startViewTransition' in document` チェックを使っており、外部の機能検出サービスは利用しません。入力に紐づくアナリティクスもなく、一度読み込めばオフラインでも動作するため、社内ルート名・デザインシステムのクラス名・未公開コンポーネントの識別子を入力しても痕跡を残しません。