こんにちは！フロントエンドの現場を長年フラフラと……おっと、最前線で駆け抜けてきたチーフアーキテクトの私です。

CSSの世界へようこそ！毎日コードを書いていると、「ボタンの色が変わった！」「レイアウトが綺麗に整った！」という小さな感動の積み重ねが本当に楽しいですよね。

でも、ふとこんな野望を抱いたことはありませんか？
「ページがパッと切り替わるんじゃなくて、スルスルッと滑らかに次の画面に繋がったら、めちゃくちゃカッコいいのになぁ……」って。

昔は、これをやろうとするとJavaScriptのライブラリをごっそり持ち込んだり、複雑なアニメーションの計算をしたりと、胃がキリキリするような実装が必要でした。正直、プロの私たちでも「うわ、また面倒なアニメーションの注文が来たぞ……」と冷や汗をかく領域だったんです。

それがなんと、今のCSSとブラウザの進化（View Transitions API）を使えば、魔法のように自然で美しい画面遷移アニメーションが、驚くほど少ないコードで実現できちゃうんです。

今日は、その最先端かつ最高にワクワクする機能である `::view-transition` 擬似要素について、難しい専門用語はなるべく置いておいて、身近なたとえ話を交えながら優しく紐解いていきましょう。大丈夫、一歩ずつ見ていけば絶対に怖くないですからね！

—

1. 画面遷移アニメーションって、そもそも何をしているの？

まず、私たちが普段見ているWebサイトのページ移動を想像してみてください。
リンクをクリックした瞬間、画面が「パッ」と白くなって、次のページが一瞬で現れますよね。あれはあれでスピーディーで良いのですが、人間、急に目の前の景色が切り替わると、脳がちょっとびっくりしちゃうんです。「おや、今どこにワープしたんだっけ？」って。

これを、映画のシーンチェンジのように、「前の画面がスーッと消えながら、次の画面がふんわりと浮き上がってくる」ような状態にできたらどうでしょう？ ぐっとリッチで、高級感のあるWebサイトになりますよね。

この「前の画面から次の画面へのバトンタッチ」を、ブラウザに自動でお手伝いしてもらう仕組みが View Transitions API です。

2. 秘密道具「パラパラ漫画」のからくり

ブラウザが裏側で何をやっているかというと、実はすごくアナログで可愛いことをしています。

1. リンクがクリックされた瞬間、ブラウザは「今の画面のスクショ（静止画）」をパシャリと撮影します。
2. その直後、裏側で新しいページを読み込みます。
3. 新しいページが表示された瞬間、ブラウザは「新しい画面のスクショ」もパシャリと撮影します。
4. そして、古いスクショを上のレイヤーにフワッと乗せ、それが消えていくアニメーションをしながら、下にある新しい画面を登場させるのです。

まるで、2枚の写真を使った「パラパラ漫画」のようですよね。
この「ブラウザが自動で作ってくれたスクショの舞台裏」を、CSSの力でスタイリング（おめかし）してあげるために用意されたのが、今回主役となる `::view-transition` 関連の擬似要素たちなのです。

—

3. 主役たちをご紹介！CSS擬似要素の家族たち

CSSを書くとき、`a:hover` のような「擬似クラス」を見たことがありますよね。それと似ていますが、今回は画面の「様子（状態）」を捕まえる 擬似要素 という特別な看板を使います。

舞台裏には、以下のような名前のついた「4人家族」が控えています。

• `::view-transition`
• → 画面遷移アニメーション全体が繰り広げられる「ステージ（劇場全体）」です。
• `::view-transition-old(root)`
• → 「さようなら、古い画面！」主役が去っていくときの古いスクショ写真です。
• `::view-transition-new(root)`
• → 「こんにちは、新しい画面！」これからの主役である新しいスクショ写真です。
• `::view-transition-group(root)`
• → 古い画面と新しい画面がすっぽり入る「額縁（コンテナ）」です。

「うわ、名前が長くて呪文みたい……」と思いましたか？ 大丈夫です！
基本的には 「古い画面（old）をだんだん透明にして、新しい画面（new）を浮かび上がらせる（フェードインする）」 というお決まりのパターンを覚えておけば、それだけで十分実用になります。

—

4. 実際にコードを書いてみよう（超シンプル版）

百聞は一見にしかず。実際にどのようなCSSを書くのか見てみましょう。

/ 1. ページ全体の画面遷移が始まったときのステージを設定します /
::view-transition {
/ ここでは特に大きな指定はしなくても動きますが、アニメーションの時間を変えたいときに使います /
}

/ 2. 【古い画面】の動き：0.5秒かけて、フワッと消えていってもらう /
::view-transition-old(root) {
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-name: fade-out; / 後述するCSSアニメーションを適用 /
}

/ 3. 【新しい画面】の動き：0.5秒かけて、フワッと現れてもらう /
::view-transition-new(root) {
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-name: fade-in;
}

えっ、これだけ？と思いませんでしたか？ そうなんです。基本の形はたったこれだけ。ブラウザ標準の「パッと切り替わる」挙動が、これだけで優しく上品なフェード切り替えに生まれ変わります。

—

5. 【実務で即使える】ふんわりと画面が切り替わるサンプル

それでは、実際にエディタに貼り付けて試せる完全版のコードを見てみましょう。
HTMLとCSSを組み合わせて、クリックしたときに優しく画面がクロスフェードするサンプルです。

HTML (index.html)

CSS (style.css)

/ ページの基本的な見た目はおしゃれなカフェ風に整えておきますね /
body {
font-family: sans-serif;
background-color: #f7f5f0;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
text-align: center;
background: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.next-button {
display: inline-block;
margin-top: 20px;
padding: 12px 24px;
background-color: #ff6b6b;
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
transition: background-color 0.2s;
}

.next-button:hover {
background-color: #ff5252;
}

/ ==========================================
ここからが本題！View Transitions の魔法のコード
========================================== /

/ 古い画面が消えていくときのカスタムアニメーション /
@keyframes fade-out {
from {
opacity: 1; / 最初はっきり見えている状態 /
}
to {
opacity: 0; / 完全に消える /
}
}

/ 新しい画面が現れてくるときのカスタムアニメーション /
@keyframes fade-in {
from {
opacity: 0; / 最初は透明 /
}
to {
opacity: 1; / はっきり見えてくる /
}
}

/ ブラウザのデフォルトのアニメーションを、上で作った優しめのものに上書きします /
::view-transition-old(root) {
animation: 0.4s ease-in-out both fade-out;
}

::view-transition-new(root) {
animation: 0.4s ease-in-out both fade-in;
}

このコードを準備して、同じ階層に `next.html`（中身は適当なHTMLでOKです）を用意し、ライブサーバーなどで開いてみてください。ボタンを押した瞬間、画面がガクッと切り替わらずに、スッと溶け込むように次のページへ移動するはずです。

感動しませんでしたか？ JSを1行も書かずに、CSSだけでこれが実現できちゃうんです。

—

6. チーフアーキテクトからのアドバイスと、ちょっとした注意点

現場でこの機能を取り入れるとき、いくつか知っておくべき「大人の知見」があります。つまずきやすいポイントなので、そっとシェアしておきますね。

1. すべてのブラウザで今すぐ完璧に動くわけではない（でも大丈夫！）
現在、Chromium系ブラウザ（Google ChromeやMicrosoft Edgeなど）では素晴らしい動きをしますが、Safariなどではまだこれからの部分もあります。
でも安心してください！View Transitions APIに対応していないブラウザでは、このCSS（擬似要素）は単に無視されるだけで、サイトが壊れたりエラーで真っ白になったりすることはありません。「動く環境のユーザーには極上の体験を、そうでない環境のユーザーには通常の遷移を」という、いわゆる「プログレッシブ・エンハンスメント（段階的改良）」の思想にぴったりの技術なんです。

2. アニメーションの時間を長くしすぎない
ふんわりさせたいからといって、アニメーションに2秒も3秒もかけてしまうと、ユーザーは「動作が重いサイトだな……」と感じてイライラしてしまいます。人間の脳が「スムーズだな」と感じる黄金比は、0.3秒〜0.5秒（300ms〜500ms）前後です。ここだけの秘密ですが、キビキビしつつも優しさを感じさせる絶妙なスピード感を探してみてください。

—

おわりに

お疲れ様でした！
`::view-transition` という何やら難しそうな名前のCSS擬似要素も、こうして中身を分解してみれば「ブラウザが撮ってくれた写真を使って、古いものと新しいものをバトンタッチさせるための衣装部屋」のようなものだと分かったのではないでしょうか。

フロントエンドの世界は日々進化していますが、基本にあるのは「使う人に心地よい体験を届けたい」という温かい気配りです。
今回覚えたフェードのテクニックを、あなたのポートフォリオサイトや、ちょっとしたお遊びのページにぜひ取り入れてみてください。きっと、コードを書くのがもっともっと楽しくなりますよ。

それでは、また次の現場でお会いしましょう！ハッピー・コーディング！