こんにちは！フロントエンドの現場を長年歩んできた、あなたの「CSSの先輩」です。
Webサイトを眺めていて、ページがパッと切り替わるんじゃなくて、スルスル〜っと滑らかに新しい画面に変わるモダンなサイトに出会ったこと、ありませんか？ 「うわ、なんかこのサイト、めちゃくちゃカッコいいな……！」って感動した経験、きっとありますよね。
あれ、実はView Transitions API（ビュー・トランジションズ・API）という、最近のブラウザですごく熱い技術が使われているんです。
今回は、その中でも「遷移する前の画面」を魔法のように操る、`::view-transition-old`というちょっと不思議でパワフルな擬似要素について、一緒に紐解いていきましょう。
「難しそう……」なんて身構えなくて大丈夫ですよ。身近な例えを交えながら、ゆっくり丁寧に解説していきますからね！
—
1. `::view-transition-old`って、いったいなに？
いきなり見慣れない英語が出てきて、ちょっとドキッとしたかもしれません。でも、難しく考えないでください。
これを理解するために、身近な「写真のアルバム」を思い浮かべてみてください。
あなたが今開いているページ（遷移前の画面）を、ふっとその場でポラロイドカメラでパシャリと撮影した写真だと思ってください。その「昔の（oldな）写真」をブラウザが一時的にグッと掴んでいる状態、それが `::view-transition-old` です。
ユーザーがリンクをクリックして次のページへ移動するとき、ブラウザの裏側ではこんなドラマが起きています。
1. パシャリ！ 今の画面の「写真」を撮る。
2. その写真（`::view-transition-old`）が、新しい画面の裏側に残りながら、シュッと小さくなったり、フワッと消えたりする。
3. 同時に、新しい画面（`::view-transition-new`）がフワッと浮かび上がってくる。
つまり、`::view-transition-old` とは、「これから消えゆく、古い画面の残像をCSSで自由にお化粧するための特等席」なんです。
—
2. つまずきやすいポイント：これはHTMLの要素じゃない！
ここで、CSSを触り始めたばかりの人が一番ハマりがちな「落とし穴」についてお話ししておきますね。
普段私たちが使っている `div` や `p`、`.button` といったクラスは、HTMLという設計図にちゃんと書かれている「実体のあるもの」ですよね。
ですが、`::view-transition-old` は違います。これはHTMLの中にはどこにも書いてありません。ページが切り替わるその瞬間だけに、ブラウザが勝手に生成する「幻の影（擬似要素）」なんです。
「えっ、じゃあどうやってスタイルを当てるの？」って思いますよね。
安心してください。書き方はいつものCSSとほとんど同じです。ただ、ひとつだけお約束があります。それは、アニメーションの動き（@keyframes）とセットで使うことが多いということです。
—
3. 実践！古い画面を「フワッとフェードアウト」させてみよう
百聞は一見にしかず。実際にコードを書いて、その動きを確かめてみましょう。
ここでは、ページが切り替わるときに、今までの画面が名残惜しそうに「フワァ〜……」と消えていく、一番ベーシックなエフェクトを作ってみますね。
サンプルコード（CSS）
/ 1. ページが切り替わる全体のアニメーション時間を決める /
::view-transition-old(root),
::view-transition-new(root) {
/ 0.5秒かけてtransition（変化）させるよ /
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
/ 2. 【主役】消えゆく古い画面（::view-transition-old）の動きを指定する /
::view-transition-old(root) {
/
消えていく瞬間、パッと消えるのではなく、
「fade-out」というアニメーションを使って透明になっていく
/
animation-name: fade-out;
}
/ 3. アニメーションの中身（キーフレーム）を作る /
@keyframes fade-out {
from {
opacity: 1; / 最初はくっきり見えている状態 /
}
to {
opacity: 0; / 最後には完全に透明になる /
}
}
チーフアーキテクトからのワンポイントアドバイス
コードに出てくる `(root)` という部分、気になりませんでしたか？
これは「画面全体（HTML丸ごと）」を対象にするという意味です。まずはこの `root` を指定しておけば、ページ全体の切り替えをコントロールできますよ。もっと慣れてきたら、特定の画像やカードだけに名前をつけてアニメーションさせることもできるようになります。奥が深くてワクワクしませんか？
—
4. もう一歩進んだ遊び心：古い画面を「パタンと縮小」させてみる
フェードアウトだけじゃちょっと物足りない？ では、もう少しアッと驚く演出をしてみましょう。
お買い物アプリなどで、商品をクリックした瞬間に、その商品画像や画面がキュッと小さくなりながら次のページへ吸い込まれていくような動き、見たことありませんか？ あれも `::view-transition-old` を使えば表現できちゃいます。
/ 古い画面が、縮みながら消えていく演出 /
::view-transition-old(root) {
animation-duration: 0.4s;
animation-name: scale-down;
}
@keyframes scale-down {
0% {
transform: scale(1); / 等倍（今の大きさ） /
opacity: 1;
}
100% {
transform: scale(0.85); / ちょっと小さくキュッと縮む /
opacity: 0; / 同時に透明にする /
}
}
これをエディタに貼り付けて実際に動かしてみると、「うわ、なんかすごいサイトを作ってるぞ！」という実感が湧いてきて、CSSを書くのが一気に楽しくなりますよ。
—
5. 最後に：焦らず、一歩ずつ楽しんでいこう
新しいCSSのプロパティやAPIに出会うと、「全部覚えなきゃいけないのかな……」とプレッシャーに感じてしまうこと、ありますよね。
でも、大丈夫です。最初から完璧に理解しているプログラマーなんて一人もいません。みんな、こうやって実際にコードを書いてみて、画面が意図通りに動いて「おっ！」と小さくガッツポーズをする、その繰り返しの積み重ねでここまで来ています。
`::view-transition-old` は、あなたの作るWebサイトに「心地よさ」と「命」を吹き込んでくれる素敵な魔法の道具です。ぜひ今日の帰り道や休日にでも、ご自身のポートフォリオサイトや趣味のページで試してみてくださいね。
あなたのフロントエンドライフが、もっともっと楽しく、彩り豊かなものになりますように！
コメント