【実行中 2026.2.25】
View Transitions APIはページ遷移でのトランジション制御なので最初にウェブサイトにアクセスしたときは何も実行されない。
そこで初回アクセスだけcssでフェードインさせて、以降のページ遷移ではView Transitions APIを使うように設定する。
あらかじめhtmlに「visit」というクラスを付けておくページ遷移を行う際、javascriptで「visit」を「view」に切り替える。
visit = 初回のみのcssフェードイン（View Transitions APIを無効化）
view = View Transitions APIを有効化
html
<html lang="ja" class="visit">
css
/* 初回だけ wrapper をフェードイン */
.visit #wrapper {
animation: fadein 1s ease-in forwards;
}
@keyframes fadein {
0% { opacity: 0.01; }
20% { opacity: 0.01; }
100% { opacity: 1; }
}
/* 2回目以降のページ遷移に View Transitions を適用 */
@view-transition {
navigation: auto;
}
/* 初回は View Transitions を無効化 */
.visit @view-transition {
navigation: none;
}
/* フェードのみ */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.6s; /* フェード時間 */
animation-timing-function: ease-in-out;
}
/* フェード+ズーム */
@keyframes zoom-fade-in {
from { opacity: 0; transform: scale(0.90); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoom-fade-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(1.10); }
}
::view-transition-new(root) {
animation: zoom-fade-in 0.5s ease;
}
::view-transition-old(root) {
animation: zoom-fade-out 0.4s ease;
}
javascript
// すでに訪問済みなら visit をviewに入れ替え
if (sessionStorage.getItem("visited")) {
document.documentElement.classList.remove("visit");
document.documentElement.classList.add("view");
} else {
// 初回アクセス
sessionStorage.setItem("visited", "true");
}