【CSS Modules】::view-transition-group疑似要素の使い方

::view-transition-group()オブジェクトは、CSSのView Transitions APIにおいて、Webサイトのページ遷移中に発生するアニメーションのグループ全体を表現するための仮想的な要素を表すオブジェクトです。この擬似要素は、ユーザーが異なるページへ移動する際に、画面上の要素が突然切り替わるのではなく、滑らかに変化する視覚効果（ビュー遷移）を実現するために設計されています。

ビュー遷移の際、view-transition-nameというCSSプロパティが設定された要素は、システムによって自動的にグループ化されます。::view-transition-group()は、このグループ全体を選択し、一括してスタイルを適用することを可能にします。例えば、遷移する要素のグループ全体に共通の透明度（opacity）や移動（transform）といったCSSプロパティを設定し、特定のタイミングでアニメーションを制御できます。

この擬似要素の内部には、遷移前の要素の状態を表す::view-transition-old()と、遷移後の新しい要素の状態を表す::view-transition-new()という二つの擬似要素が含まれています。これらを個別にスタイリングすることで、遷移前後の要素に対してさらに詳細なアニメーション効果を付与することができます。::view-transition-group()を利用することで、開発者は複雑なJavaScriptコードを最小限に抑えつつ、ユーザーに対して直感的で質の高いWeb体験を提供できるため、モダンなWebデザインにおいて非常に有用な機能です。

Copy
1::view-transition-group(group-name) {
2  /* プロパティと値を記述 */
3  animation-duration: 0.5s;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません