Chrome 102 以降で Navigation API が、Chrome 111 以降で View Transitions API がサポートされました。 本記事ではこの二つの API を用いてページ遷移アニメーションを実装してみようと思います。 デモサイト&コード 本記事では以下のデモサイトとコードをもとに説明を行うことがあります。全体的な挙動やコードを確認したい際には以下をご参照ください。 View Transitions API View Transitions API は異なる DOM 状態間におけるアニメーション付きの画面遷移と DOM の更新を、従来よりもシンプルな方法で提供する API です。 View Transitions API の詳細な説明については View Transitions API - Web APIs | MDN をご参照ください。 デモページ&コード