CSS

A CSS property that links element animations between pages by assigning a transition name.

view-transition-name

view-transition-nameは、ページの見た目を切り替えるときにアニメーション（トランジション）を使いたいときに使うCSSプロパティです。

これを設定することで、同じ名前を持つ要素が別のページにもあれば、ブラウザが自動的に前後の要素を対応させてアニメーションでつなぐことができます。

たとえば、画像や見出しにview-transition-nameを付けておくと、ページを移動するときに「ふわっと移動」や「スライドする」などの演出ができます。

CSS

h1 {
	view-transition-name: main-title;
}

上記のようにCSSで名前を設定し、前のページと次のページのh1要素が同じview-transition-nameを持っていれば、自然にアニメーションして切り替わるというわけです。

これは、シングルページアプリ（SPA）や、最新のナビゲーションAPI（View Transitions API）と組み合わせることで、より滑らかなUXを実現できます。