データはサーバーに送信されますか？

いいえ、このツールは完全にブラウザ内で動作するため、入力内容が外部に送信されることはありません。

スマートフォンでも使えますか？

はい、スマートフォンやタブレットのブラウザ環境でもご利用可能です。

全てのブラウザでView Transition アニメーションは動きますか？

Chrome 111以降、Edge 111以降、Safari 18以降でサポートされています。非対応ブラウザ環境では、単にアニメーションが省略されるだけの安全なフォールバック設計になっています。

SPA（Single Page Application）以外でも使えますか？

はい。同一オリジンの通常の複数ページ構成（MPA）でも、をHTMLに記述し、CSSを指定するだけで実現可能です。

view-transition-name は何をつければよいですか？

ページ内で一意となる任意の文字列（例: main-content, hero-image）を指定します。同一ページ内に同じ名前を持つ要素が同時に複数存在すると遷移が失敗するためご注意ください。

JavaScriptなしでも遷移アニメーションは作れますか？

MPA（複数ページ遷移）で同一オリジンの場合は、JavaScriptを一切書かずに前述のCSSとmetaタグだけで遷移アニメーションを実装可能です。

CSS View Transition ジェネレーター | 直感UIで画面遷移アニメを生成

🔒完全ブラウザ内処理

入力データはサーバーに一切送信されません

📝登録不要

アカウント作成・ログイン終了で今すぐ利用可能

⚡即時プレビュー

状態遷移アニメーションをリアルタイムに確認

Preview

view-transition-name

Duration (秒)

0.5s

Delay (秒)

Easing

※ ::view-transition-old（古い状態の画面）が退場していく際の終点（To）設定

To Opacity

To Scale

To Translate X

To Translate Y

To Rotate (deg)

※ ::view-transition-new（新しい状態の画面）が入ってくる際の始点（From）設定

From Opacity

From Scale

From Translate X

From Translate Y

From Rotate (deg)

📖 このツールについて

CSS View Transition ジェネレーターは、次世代仕様「View Transition API」を用いたスムーズな画面遷移アニメーションを視覚的に構築・プレビューできる完全無料の開発者向けツールです。

これまでSPA（単一ページアプリケーション）で複雑なアニメーションライブラリを使っていた処理を、ブラウザの標準機能だけで実現できます。「退場（旧状態）」と「入場（新状態）」に分かれた疑似要素アニメーションを細かく設定し、即座にCSS・JavaScriptコードとしてコピーすることが可能です。

このツールは完全にブラウザ内（クライアントサイド）で処理が完結します。入力した内容が外部サーバーに送信されることはなく、安全かつセキュアにご利用いただけます。

🔰 使い方

1. プリセットまたは基本設定を選ぶ

まずは「Fade」や「Slide」などのプリセットを選択するか、「view-transition-name」を入力してベースとなる状態を定義します。

2. アニメーションをプレビュー・微調整する

「再生 / 状態を切り替え」ボタンを押すと、実際のモックアップ画面が遷移します。タブから退場時（Old）と入場時（New）のアニメーションパラメータ（不透明度や移動・拡大縮小など）を調整し、理想の遷移効果を作り上げます。

3. コードをコピーして本番環境に適用する

完成したアニメーションのコードを「CSS」「JavaScript」「HTML」タブからそれぞれコピーし、ご自身のプロジェクト（SPA/MPA問わず）に組み込みます。

📚 用語集

View Transition API: DOMの変更前（古い状態）と変更後（新しい状態）のスクリーンショットをブラウザが自動でキャプチャし、それらをシームレスにアニメーション遷移させる仕組みです。
view-transition-name: 遷移アニメーションの対象となる要素を特定するためのCSSプロパティです。新旧のDOM間で同じ名前が指定された要素同士が連動してアニメーションします。
::view-transition-old: 遷移前の「古い状態」のスクリーンショットを含む疑似要素です。この要素をアニメーションさせることで、退場時のエフェクト（フェードアウトやスライドアウト等）を制御します。
::view-transition-new: 遷移後の「新しい状態」のスクリーンショット（ライブ表現）を含む疑似要素です。入場時のエフェクト（フェードインやスライドイン等）を制御します。
Cross-document View Transitions: SPAのようなJavaScriptを介した単一ページ内での遷移だけでなく、MPA（通常の複数ページ）間での画面遷移を、metaタグ等の指定だけでアニメーションさせる拡張仕様です。

⚙️ 技術解説

View Transition API は、開発者がDOMを更新する瞬間にフックし、ブラウザエンジンに対して特定のツリー操作を要求します。

1. キャプチャフェーズ

`document.startViewTransition()` が呼ばれると、ブラウザは一度描画を止め、現在の画面のキャプチャ（古い状態）を撮影します。

2. DOM更新と新キャプチャ

コールバック関数内でDOMが更新された後、ブラウザは新しい画面のキャプチャ（新しい状態）を撮影します。

3. 疑似要素ツリーの構築と遷移

既存のDOMの最上位に `::view-transition` という特殊な疑似要素ツリーが一時的にアタッチされます。その配下で、古いキャプチャ（`::view-transition-old`）から新しいキャプチャ（`::view-transition-new`）へとデフォルトでクロスフェードさせるアニメーションが自動実行されます。本ツールで生成するCSSは、このデフォルトのクロスフェードを**独自のアニメーションへと上書き**するものです。

❓ FAQ

Q. データはサーバーに送信されますか？: A. いいえ、このツールは完全にブラウザ内で動作するため、入力内容が外部に送信されることはありません。
Q. スマートフォンでも使えますか？: A. はい、スマートフォンやタブレットのブラウザ環境でもご利用可能です。
Q. 全てのブラウザでView Transition アニメーションは動きますか？: A. Chrome 111以降、Edge 111以降、Safari 18以降でサポートされています。非対応ブラウザ環境では、単にアニメーションが省略されるだけの安全なフォールバック設計になっています。
Q. SPA（Single Page Application）以外でも使えますか？: A. はい。同一オリジンの通常の複数ページ構成（MPA）でも、<meta name="view-transition" content="same-origin" /> をHTMLに記述し、CSSを指定するだけで実現可能です。
Q. view-transition-name は何をつければよいですか？: A. ページ内で一意となる任意の文字列（例: main-content, hero-image）を指定します。同一ページ内に同じ名前を持つ要素が同時に複数存在すると遷移が失敗するためご注意ください。
Q. JavaScriptなしでも遷移アニメーションは作れますか？: A. MPA（複数ページ遷移）で同一オリジンの場合は、JavaScriptを一切書かずに前述のCSSとmetaタグだけで遷移アニメーションを実装可能です。

💡 活用シーン

🛒

ECサイトの商品詳細遷移

商品一覧ページでサムネイルをクリックした際、画像がふわっと拡大しながらシームレスに商品詳細ページへ切り替わるリッチな体験を提供します。

📱

ネイティブアプリ風のUI展開

スワイプやクリック操作に応じて、画面が左右にスライドして入れ替わるような「ネイティブアプリで見慣れたアニメーション」をWebブラウザで実現できます。

🌗

ダークモード切り替え

設定画面からダークモードを有効にした際、全画面がパッと切り替わるのではなく、円形に色が広がっていくような独自アニメーション演出を付加できます。

📋

リストのソートとフィルタリング

アイテムの一覧を絞り込んだり並び替えた際、消える要素はフェードアウトし、残る要素が滑らかに新しい位置へ移動する視覚的な案内を行います。

CSS