Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
アニメーション Limited support

Cross-document view transitions

従来、ページ間のスムーズな遷移はSPAでしか実現できませんでしたが、この機能によりMPAでもネイティブアプリのような画面遷移が可能になります。遷移元と遷移先の両方のドキュメントがオプトインする必要があります。ページナビゲーション時のユーザー体験を大幅に向上させます。

ビュー遷移ページ遷移アニメーション

概要

従来、ページ間のスムーズな遷移はSPAでしか実現できませんでしたが、この機能によりMPAでもネイティブアプリのような画面遷移が可能になります。遷移元と遷移先の両方のドキュメントがオプトインする必要があります。ページナビゲーション時のユーザー体験を大幅に向上させます。

対応ブラウザ

デスクトップ

Chrome 126+
Edge 126+
Safari 18.2+
Firefox 未対応

モバイル

Chrome Android 126+
Safari iOS 18.2+
Firefox Android 未対応

基本構文

CSS 
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: fade-out 0.3s;
}

実務での使いどころ

  • MPAでのページ遷移演出

    ECサイトの商品一覧から詳細ページへの遷移時に、スムーズなクロスフェードアニメーションを適用してユーザー体験を向上させます。

注意点

  • 遷移元と遷移先の両方のドキュメントで@view-transitionルールを宣言する必要があり、片方だけでは遷移が発生しません。

アクセシビリティ

  • prefers-reduced-motionメディアクエリと併用し、モーション設定を尊重したフォールバックを提供してください。

参考リンク