ページ遷移 / View Transitions

ページ遷移 / View Transitionsに分類されるWeb表現技法7件。View Transitions API 一覧⇔詳細、FLIPアニメ並べ替え、カーテン遷移スライダー、モーフィングナビなど。ライブデモとコピーできるコード付き。

ネイティブの View Transitions API で一覧と詳細の切替を自動モーフ。共有サムネに view-transition-name を割り当て、SPA風の滑らかな画面遷移を実現します。

FLIP（First-Last-Invert-Play）技法で並べ替え時の位置差分だけをGPUアニメ。シャッフル・ソート・カードクリックで滑らかにリオーダーするリスト遷移です。

上下のパネルが中央で閉じ切る瞬間に裏でコンテンツを差し替えるカーテン演出。シーン切替やページ遷移のつなぎに使える劇的なトランジションです。

ハンバーガーアイコンが×へモーフし、角の円が全面へ広がるメニュー遷移。clip-path とSVGの変形で、ヘッダーの開閉インタラクションを上質に演出します。

アクティブタブの実寸を計測し、下線インジケーターを transform で滑走させるタブ切替。内容のフェードと同期し、文字数が違っても正確に追従します。

前面に次の画像を載せ clip-path の斜めワイプで切替えるギャラリー遷移。完了後に背面へ確定する二層構成で、無段差にスライドし続けます。

CSS 3D Transforms の preserve-3d と backface-visibility で表裏をY軸回転。クリックやキー操作でめくれるプロフィールカードの立体トランジションです。