※2026年5月時点で、一部ブラウザでは未対応の機能があります。ご注意ください。
ページ遷移アニメーションを実装したいとき、これまではJavaScriptで状態管理をしながら演出を作ることが多く、初学者にはハードルが高めでした。
View Transition APIを使うと、ブラウザが遷移前後の描画を扱ってくれるため、比較的シンプルなコードで滑らかな遷移を作りやすくなります。
この記事では、View Transition APIを使ったシンプルなページ遷移アニメーションの作り方を解説します。
View Transition APIとは
View Transition APIは、画面の切り替え前後をブラウザがキャプチャし、その差分をもとに遷移アニメーションを作る仕組みです。従来のように「要素の追加・削除・表示切り替え・タイミング調整」をすべて手動で制御しなくても、遷移演出を実装できます。
従来のページ遷移の実装との違い
従来
- DOMの状態管理とアニメーション制御をJavaScriptでそれぞれ手動で行う
- タイミング調整が複雑になりやすい
View Transition APIを使った実装
- 遷移前後の描画をブラウザ機能として扱える
- CSS中心で調整しやすい
完成版 シンプルな画面フェード編
実装手順 シンプルな画面フェード編
今回は、コーポレートサイトのような複数ページ構成のWebサイトを想定し、トップページとAboutページを行き来するときに、全体がふわっと入れ替わる最小サンプルを作ります。
/* ファイルの冒頭に追加 */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fade-out var(--vt-duration) ease both;
}
::view-transition-new(root) {
animation: fade-in var(--vt-duration) ease both;
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 動きを減らしたい設定のユーザーへアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}@view-transition { navigation: auto; }
この指定を記述するだけで、対応しているブラウザでは、ページ遷移時に遷移前後の描画を使ったアニメーションが可能になります。
navigationの値には、他にtraverse, push, replace等がありますが、いずれもJavaScriptのイベントリスナーのようなユーザー操作に起因するものなので、基本的にはプロパティは初期値であるautoが無難かと思います。
::view-transition-old() / ::view-transition-new()
遷移アニメーションの新しい要素と古い要素に対してスタイルを適用する擬似要素です。
今回は、遷移前後それぞれの疑似要素に、keyframeアニメーションを指定します。
old(root) →「遷移前のページ」をフェードアウトnew(root) →「遷移後のページ」をフェードイン
リンククリック時に画面全体が自然に入れ替わります。
たったこれだけで、ページ遷移時にアニメーションを適用することができました！
ページの切り替わり時に演出があるだけで、サイトがかなりリッチに感じられます。
また、View Transition APIが非対応のブラウザでは通常の遷移になるため、段階的な導入がしやすいのも良いところかと思います！
完成版 右から左に流れる背景編
ページ遷移時に背景が右から左へ流れるアニメーションのパターンも実装してみます。
実装手順 右から左に流れる背景編
@view-transition {
navigation: auto;
}
main {
/* ビュー遷移のスナップショットの指定 */
view-transition-name: page;
}
.card {
/* ビュー遷移のスナップショットの指定 */
view-transition-name: card;
}
/* デフォルトでのアニメーション停止 */
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
::view-transition-group(page) {
animation-duration: var(--vt-duration);
}
::view-transition-old(page) {
animation: none;
}
::view-transition-new(page) {
will-change: transform;
animation: page-slide-in var(--vt-duration) cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
::view-transition-group(card) {
animation-duration: var(--vt-duration);
}
::view-transition-old(card),
::view-transition-new(card) {
animation: none;
}
/* ======================================
Right → Left
====================================== */
@keyframes page-slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0%);
}
}
/* 動きを減らしたい設定のユーザーへアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(page),
::view-transition-new(page),
::view-transition-old(card),
::view-transition-new(card) {
animation: none;
}
}view-transition-name
背景色を指定している<main>タグ、および、中のコンテンツである.cardにview-transition-nameを指定します。
任意の名前を接続することで、遷移前と遷移後の画面の接続対象に設定します。
また、View Transition APIにはデフォルトでクロスフェードのアニメーションが入ります。
これを残したままだと、オリジナルで作成したアニメーションを入れても、全体が薄くフェードして見えたり、意図しない二重演出が発生しやすいため、::view-transition-old(root),::view-transition-new(root) {animation: none;} で、デフォルトのアニメーションは無効にしておきます。
今回は、右から左へ動く背景にしたいので、::view-transition-old側のアニメーションも無効にし、::view-transition-new側だけkeyframesでアニメーションをつけました。
まとめ
View Transition APIを使うと、これまでJavaScriptで細かく制御していたページ遷移アニメーションを、よりシンプルな実装で表現しやすくなります。特に、WEB制作のような複数ファイルを行き来する遷移でも、遷移前後の描画をブラウザが扱ってくれるため、少ないコードで自然な演出を追加できるのが大きな魅力です。
今回のような簡易的な導入であれば、JavaScript不要で、CSSのみで遷移アニメーションが完結してしまいます！
導入時は、次の3点を押さえておくと実装が安定します。
- デフォルトのクロスフェードアニメーションを無効化しておく
view-transition-nameの対象を整理して、どの要素をつなぐかを明確にする- prefers-reduced-motionの記述を入れ、アクセシビリティへ配慮する
OSやブラウザの「視差効果を減らす」設定を有効にしているユーザーには、アニメーションが不快に感じられることがあります。
prefers-reduced-motion: reduceというメディアクエリを使うと、その設定を検知してアニメーションを無効化できます。
まずはシンプルな挙動から始め、慣れてきたら背景スライドや要素単位の切り替えに広げていくのがおすすめです。
小さく導入して効果を確認しながら、サイト全体の体験向上につなげていきましょう。
