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

::view-transition-image-pair()擬似要素は、ウェブページにおけるビュー遷移（View Transitions）時に、画面要素の旧バージョンと新バージョンを視覚的に結びつけるために使用される特別なCSSの要素です。これは、主にDOM要素の形状や位置が変化する際に、その遷移を滑らかにアニメーションさせる「View Transitions API」の一部として機能します。

具体的には、この擬似要素は、遷移前の要素の状態を表す::view-transition-old()と、遷移後の要素の状態を表す::view-transition-new()という二つの子擬似要素を内包するコンテナとして振る舞います。システムは、遷移元の要素と遷移先の要素が視覚的にペアと認識できる場合にのみ、この::view-transition-image-pair()擬似要素を自動的に生成します。

開発者はこの擬似要素に対してスタイルを適用することで、遷移中に表示される画像ペア全体に対して、一貫したスタイルやアニメーション効果を定義できます。例えば、遷移するオブジェクトのクリッピングパスを設定したり、影や背景、全体の変形といった視覚効果を加えたりすることが可能です。これにより、ビュー遷移のアニメーションにおいて、ユーザーが視覚的に連続性を感じられるようなスムーズで魅力的な体験を構築し、Webアプリケーションのユーザーインターフェースの品質と応答性を向上させることができます。

Copy
1::view-transition-image-pair(my-transition-name) {
2  /* スタイルを記述 */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません