Page Transition
ページ遷移
どんな動き？
リンクをクリックしてページを移動する際、画面が唐突に切り替わるのではなく、オーバーレイが画面を横切るなどして次のページへなめらかにつなぐアニメーション。ブラウザ標準のページ読み込みでは表現できない、ワンランク上のブランド体験を演出できる。View Transitions APIやbarba.jsといった仕組みで実装され、AstroのView Transitionsのように標準機能として使えるフレームワークも増えている。
よく使う場所
コーポレートサイトポートフォリオブランドサイト全体
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Cover the screen with an overlay that sweeps across during page navigation, swapping the content underneath while hidden.Trigger:
click on a navigation link.
Initial state:
Current page: visible, opacity: 1
Overlay: off-screen to one side
Animation:
An overlay sweeps in to fully cover the viewport; the moment it fully covers the screen, the old page's content is swapped for the new page's content behind it; the overlay then continues sweeping off to the opposite side.
Final state:
New page: visible, opacity: 1
Overlay: off-screen on the far side
Timing:
duration: 0.6–0.9s for the full sweep, easing: ease-in-out. Play once per navigation.実装方法の候補
この動きは以下の技術で実装できます。
View Transitions APIbarba.jsswupAstro View Transitions
別名・関連ワード
Page Transition AnimationView TransitionRoute Transition