【入門編】 ::view-transition-new 擬似要素による遷移後状態 – CSS実践ガイド

こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。

今日は、Web制作の世界に飛び込んだばかりのあなたへ、ちょっと未来のワクワクする技術「View Transitions API（ビュー・トランジションズ・API）」、そしてその中でページが切り替わったあとの姿を魔法のように操る`::view-transition-new`というCSSの擬似要素についてお話ししますね。

「擬似要素？なんか難しそう……」
「CSSアニメーションとは何が違うの？」

そんな風に思った方も大丈夫。安心してください。難しい言葉の裏側にある「なるほど！」を、身近な例えを交えながら、じっくり優しくほどいていきますよ。

—

1. ページ遷移って、なんだか味気なくないですか？

普段、私たちがWebサイトをサーフィンしているとき、リンクをクリックするとページが一瞬で「パッ」と切り替わりますよね。

あれって、よく考えると少し寂しくありませんか？
まるで、お気に入りの絵本を読んでいて、次のページを開いた瞬間に、前のページの記憶がきれいさっぱり消えてしまうような……そんなデジタルならではの無機質さを感じたことはないでしょうか。

「前のページから、次のページへ、滑らかに景色がつながっていけたらいいのに」
そんなWebデザイナーや開発者たちの長年の夢を、ブラウザの機能として叶えてくれるのが View Transitions API です。

そして、そのドラマチックな画面の切り替わり（トランジション）の中で、「新しく現れたページ（遷移後）」がどうやって登場してくるかをこっそり演出する裏方さんこそが、今回主役の `::view-transition-new` なんです。

—

2. お買い物の「レシート」に例えて考えてみよう

イメージしやすいように、身近な例え話をさせてください。

あなたは今、お洋服屋さんで素敵なお品物を選んで、レジでお会計をしようとしています。
店員さんが目の前で、古い伝票をスッと引き抜き、新しいレシートをパッと差し出してくれました。

このとき、

古い伝票（これまで見ていたページ） が消えていく姿を `::view-transition-old`
新しいレシート（これから見るページ） が新しく現れてくる姿を `::view-transition-new`

と例えることができます。

`::view-transition-new` は、新しいページがDOM（HTMLの構造）として読み込まれたあとに、ブラウザが勝手に作ってくれる「一時的なスクリーンショット（あるいは舞台のセット）」のようなものです。

私たちは、この `::view-transition-new` という特別なCSSの指定を使うことで、「新しいページが、右からスライドして登場してほしいな」「だんだんフワッと浮かび上がってきてほしいな」といった演出を自由にコントロールできるのです。

—

3. 実際にコードを書いて、動きを見てみよう

百聞は一見にしかず。実際にどのようなCSSを書くのか見てみましょう。
ここでは、「新しいページが、下からフワッと優しく浮き上がってくる」ようなアニメーションを作ってみますね。

/
【ポイント】
::view-transition-new(root) は、ページ全体が新しく切り替わるときの
「遷移後の状態（新しいページ）」を指しています。
/
::view-transition-new(root) {
/ アニメーションの時間を「0.5秒」に設定します /
animation-duration: 0.5s;

/ 動きのアクセント（最初ゆっくり、途中からスーッと動く設定） /
animation-timing-function: ease-out;

/ どんな動きをするかを指定する名前（下の @keyframes と繋がります） /
animation-name: slide-up-fade-in;
}

/
新しいページが「どんなふうに登場するか」のシナリオ（キーフレーム）
/
@keyframes slide-up-fade-in {
from {
/ スタート地点：少し下（20px下）にいて、姿は見えない（透明度0）状態 /
transform: translateY(20px);
opacity: 0;
}
to {
/ ゴール地点：元の位置に戻ってきて、くっきり見える（透明度1）状態 /
transform: translateY(0);
opacity: 1;
}
}

たったこれだけの記述で、ページが切り替わる瞬間が、まるで映画のワンシーンのように滑らかで心地よいものに生まれ変わります。すごいですよね！

—

4. つまずきやすいポイントと、温かいアドバイス

ここで、初心者の方向けに「よくあるつまずきポイント」をそっとシェアしておきますね。

Q. CSSを書いたのに、全然アニメーションしないよ？

A. 大丈夫、焦らないでください！
View Transitions APIは、まだすべてのブラウザ（特にSafariなど）で完全に同じように動くわけではありません。また、JavaScript側で「ページ遷移のトランジションをやるよ！」という合図（`document.startViewTransition()` など）を出してあげる必要があります。

まずはGoogle Chromeなどのモダンなブラウザで試してみて、「動いた！」という感動をぜひ味わってみてください。一歩一歩、確実に進んでいけば大丈夫ですからね。

—

まとめ：あなたの手で、Webに「心地よさ」を

今回は、`::view-transition-new` 擬似要素を使って、ページ遷移後の世界を優しく演出する方法についてお話ししました。

`::view-transition-new` は、新しく現れるページの見た目をコントロールする魔法のセレクタ
アニメーションの時間を調整したり、ふわっと浮かばせたりすることで、ユーザー体験が劇的にリッチになる
難しく考えず、「新しいページがどんな風に登場してほしいか」をワクワクしながら想像してCSSを書けばOK！

Web制作の楽しさは、自分が書いたコードで画面に「命」が吹き込まれた瞬間を味わうことにあります。
今日のこの記事が、あなたのコーディングライフを少しでも楽しく、温かいものにするきっかけになれたら……チーフアーキテクトとして、これ以上嬉しいことはありません。

それでは、また次の現場でお会いしましょう！一緒に楽しくコードを書いていきましょうね。