ページ遷移アニメーションをもっと自然に - Cross-Document View Transitions入門

小林祐也

2026.05.19

この記事を共有する

で保存する

LINE

このページのURLをコピー

https://kasoudesign.com/knowledge/view-transitions

クリップボードにコピーしました

保存

最近のWebサイトは、スクロールやアニメーションだけでなく、
「ページ遷移そのもの」の体験もかなり変わってきています。

特に最近気になっているのが、Cross-Document View Transitionsです。

これは、別ページへの遷移時に要素同士を自然につなげられる仕組みです。
従来のような「画面が切り替わった感覚」を減らし、
ページ間の体験を連続的に見せられるようになります。

Cross-Document View Transitionsとは？

Cross-Document View Transitionsは、
ページ遷移時の状態変化をブラウザ側でアニメーション化できる仕組みです。

例えば、一覧ページのカード画像をクリックした時、
その画像を詳細ページのヒーロー画像へ自然につなげられます。

これまで同じような演出を作ろうとすると、

などが必要になるケースが多くありました。

ただ、Cross-Document View Transitionsでは、
通常のHTMLページ遷移でもかなり自然な表現が可能になっています。

Cross-Document View Transitionsのサンプル

この技術は、コードを見るより実際に触った方が理解しやすいです。

特に印象的なのが、
「ページが切り替わっている感覚」がかなり薄くなることです。

例えば、一覧から詳細へ遷移する時も、
単純に画面を切り替えるのではなく、
「続きとして見せる」感覚に近くなります。

これは、最近増えている

などとかなり相性が良いです。

基本的な実装はそこまで複雑ではありません。

まず、ページ遷移を有効化します。

html {
  view-transition-name: root;
}

そして、つなげたい要素に同じ名前を付与します。

.card-image {
  view-transition-name: card-image;
}

これだけでも、対応ブラウザでは遷移アニメーションが有効になります。

さらに、

clip-path
要素の表示範囲を切り抜くためのCSSです。
円形に表示したり、一部だけを見せたりできるため、ページ遷移時のマスク演出と相性が良いです。
blur
ぼかしを加えるエフェクトです。
遷移中に軽くぼかすことで、視線誘導や奥行き感を作れます。
scale
要素の拡大・縮小を制御します。
カード画像がヒーローへ拡大されるような演出にもよく使われます。
opacity
透明度を制御するプロパティです。
フェードイン・フェードアウトなど、最も基本的な遷移演出で使われます。
filter
色味やコントラスト、明るさなどを加工できるCSSです。
モノクロ化や発光感の追加など、雰囲気づくりにも活用できます。