ページ遷移をアニメーション化する方法【View Transition API UI】

これまでスクロールに応じたUIを多く作ってきましたが、
今回は少し視点を変えて、

👉 「ページ遷移そのもの」をアニメーション化するUI

を扱います。

クリック → 別ページ表示
という“途切れた体験”を、

👉 繋がった動きとして見せる

のが今回のテーマです。

これまでのスクロール系UIについては、以下の記事で詳しく解説しています。

→ #29 Sticky Scroll Animation
→ #30 Scroll Story UI

1.View Transition APIとは？

View Transition APIは、

• ページ切り替え時のDOM状態を保持
• 前後の画面をアニメーションで繋ぐ

という仕組みです。

これにより、

• カード → 詳細ページ
• リスト → 個別ページ

のような遷移が自然に繋がって見えるようになります。

アニメーションの基本となる考え方については、こちらもあわせて確認しておくと理解しやすくなります。

→ #01 requestAnimationFrame
→ #03 easing

2.基本実装

まずは最小構成です。

<a href="page2.html" class="link">Go Detail</a>

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault()

    document.startViewTransition(() => {
      window.location = link.href
    })
  })
})

CSSでアニメーションを定義

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.4s ease;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

パフォーマンスや滑らかさの考え方は、以下の記事で詳しく解説しています。

→ #04 フレームレートとパフォーマンス

3.実験：擬似ページ遷移体験

スクロールとは違い、
「一瞬の体験」をコントロールするUIです。

観察ポイント

• 一瞬の遷移でも、画面の切り替わりがやわらかく見える
• 完全な別ページ遷移でなくても、体験設計の練習になる
• durationが長すぎると逆に重く感じる

今回のような「体験としてのUI設計」は、単純なアニメーションとは少し考え方が異なります。

スクロールを使った体験設計については、こちらも参考になります。

→ #37 Scroll Time UI
→ #38 Scroll Timeline UI

4.よくある失敗

❌ なんでもアニメーションする

→ UXが重くなる

❌ durationが長すぎる

→ 0.3〜0.5秒がベスト

❌ 非対応ブラウザ未考慮

→ フォールバック必須

5.このUIのポイント

• 「繋がっている感」を作るUI
• scrollではなく“遷移の体験設計”
• モバイルで特に効果が大きい

UIの動きを構造的に理解したい場合は、シリーズ全体のまとめもおすすめです。

→ #07 アニメーション設計まとめ

また、システムとしてUIを設計する考え方は、こちらで詳しく解説しています。

→ #16 実践構築（統合）

6.まとめ

View Transition APIを使うと、

👉 ページ遷移が“イベント”になる

単なる画面切り替えではなく、
“体験の一部”として設計できるようになります。