こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り抜けてきたチーフアーキテクトの私です。
CSSの世界へようこそ！ 日々、画面を彩るコードを書いていると、「もっと滑らかに、もっと魔法みたいにページが切り替わったらいいのに……！」って思う瞬間、ありますよね。
最近のCSSには、View Transitions API（ビュー・トランジションAPI）という、ページが切り替わる瞬間をふわっとアニメーションさせる強力な仕組みが備わりました。そして、その裏側でこっそり、しかしものすごく重要な役割を担っているのが、今回お話しする`::view-transition-image-pair`（ビュー・トランジション・イメージ・ペア）という聞き慣れない名前の擬似要素です。
名前からして「なんだこれ、呪文か？」って身構えてしまいますよね。大丈夫ですよ。今日はこの子を、身近な例えを交えながら、とびきり優しく解剖していきますね！
—
1. まずはイメージしよう：スライドショーの「2枚の写真」
突然ですが、昔ながらのパラパラ漫画や、写真のスライドショーを思い浮かべてみてください。
「前の写真」から「次の写真」に切り替わる瞬間、一瞬だけ、2枚の写真が重なり合って、前の写真がスーッと消え、次の写真がフワッと浮かび上がってくるアレです。あの瞬間、私たちの目の前では何が起きているでしょうか？
そう、「古い写真」と「新しい写真」という、ペア（組）になった2つの画像が、同じ場所にピタッと重ね合わされているんです。
この「古い画面のスクリーンショット」と「新しい画面のスクリーンショット」をガシッと抱きかかえて、重ね合わせるための「専用の額縁」。それが、今回主役の `::view-transition-image-pair` です！
—
2. `::view-transition-image-pair` って、具体的にどんな構造なの？
ビュー・トランジションが始まると、ブラウザの裏側では、まるで舞台裏のスタッフのような手際の良さで、次のような「特等席の入れ物（DOMツリー）」が自動的に組み立てられます。
::view-transition（舞台全体の幕）
┗ 📂 ::view-transition-group( )（グループの箱）
┣ 🖼️ ::view-transition-old( )（古い画面の画像）
┣ 🖼️ ::view-transition-new( )（新しい画面の画像）
┗ 📦 【今日の本命】::view-transition-image-pair（2枚をまとめる額縁）
※厳密には `image-pair` の中に `old` と `new` が入る親子関係になっています。
要するに、`::view-transition-image-pair` とは、「今から消える古い画面（old）」と「今から現れる新しい画面（new）」の2枚の画像を、ぴったり同じサイズ・同じ位置で重ね合わせて保持するための専用ボックス（ペアレント）」なんです。
ここがしっかりお互いを抱きしめていてくれるおかげで、私たちは「画面がパッと切り替わる」のではなく、「滑らかにクロスフェードする」というリッチな体験を手に入れることができます。
—
3. 実際に書いてみよう！ アニメーションを操る魔法のコード
「なるほど、額縁なのはわかったけど、これを触ると何が嬉しいの？」って思いますよね。
実は、この `::view-transition-image-pair` をCSSでちょっといじってあげると、ただのクロスフェード（ふわっと切り替え）だけじゃなく、画面がナナメにスライドしたり、ダイナミックに回転しながら切り替わるような演出が簡単に作れるようになるんです。
百聞は一見に如かず。実際にエディタにコピペして試せるコードを見てみましょう。
/
ページ全体の遷移アニメーションの時間を少しだけ長め（0.8秒）にします。
これによって、変化の様子がじっくり観察できるようになります。
/
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.8s;
}
/
ここが今回の主役！
古い画像と新しい画像を包み込んでいる「額縁（image-pair）」に対して、
アニメーションの指示を出します。
/
::view-transition-image-pair(root) {
/ 例えば、アニメーション中に少しだけボックスに影をつけて立体感を出すことも可能！ /
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
/
もし「ただのクロスフェードじゃなくて、新旧の画像が混ざる瞬間を特別に演出したい！」
というときは、ここに mix-blend-mode などを指定して面白い効果を狙うこともできます。
/
}
初学者のうちは、「あ、ブラウザはこのペア（組）の箱を使って、古い画面と新しい画面を上手に重ね合わせてくれているんだな」というイメージを持てていれば、100点満点です！
—
4. つまずきやすいポイント＆チーフからの優しいアドバイス
ここで、CSSを学び始めた方からよくいただく質問をシェアしますね。
> Q. 「先生、この擬似要素、普段のWebサイトのコーディングで毎日書かないといけないんですか？」
>
> A. 大丈夫です！ 毎日書く必要はまったくありません！
`::view-transition-image-pair` は、私たちがゼロからHTMLを書くわけではなく、ブラウザがページ遷移の魔法（API）を発動したときに、自動的に裏側で用意してくれる特設の要素です。
普段のレイアウト（flexboxやgridなど）で要素を並べるときに直面するような、「CSSが効かない！」「レイアウトが崩れた！」といった恐怖のトラブルとは無縁の世界にあります。
ですから、「あ、ブラウザの裏側では今、古い画面と新しい画面がこの額縁にきれいに収まって、仲良くアニメーションしてくれているんだな」という心の中のイメージ（メンタルモデル）として持っておくだけで十分なんです。
—
まとめ：CSSの裏側の「仕組み」を楽しもう
今回は、ちょっとマニアックだけど最高にクールな擬似要素 `::view-transition-image-pair` についてお話ししました。
- 役割： 遷移前の画面（old）と遷移後の画面（new）の2枚を、ぴったり重ね合わせて保持する「額縁」のような存在。
- メリット： これがあるおかげで、ブラウザが滑らかな画面遷移アニメーションを綺麗に描画できる。
- 実務でのスタンス： ブラウザが自動生成してくれるものなので、仕組みだけフワッと理解しておけばOK！
CSSの仕様書を開くと、難解な英語や専門用語の嵐でめまいがしてしまうかもしれません。でも、身近な例えに置き換えてみると、「なんだ、やっていることはすごくシンプルなんだな」って気づけるはずです。
ひとつひとつのパーツがどんな役割を持っているのか、その裏側のストーリーを想像しながらコードを書くと、Web制作はもっともっと楽しくなりますよ。
それでは、あなたのコーディングライフが今日も素晴らしいものになりますように。また現場でお会いしましょう！
コメント