CSS View Transitionsをマスターする：疑似要素スタイリングの徹底解説

進化し続けるウェブ開発の世界において、シームレスで流れるような、魅力的なユーザー体験の追求は絶え間なく続いています。長年にわたり、開発者たちはウェブとネイティブアプリケーションとの間のギャップ、特にページ遷移の滑らかさに関するギャップを埋めようと努力してきました。従来のウェブナビゲーションは、多くの場合、ページ全体の再読み込みという無機質な体験をもたらします。一瞬表示される真っ白な画面は、ユーザーの没入感を妨げます。シングルページアプリケーション（SPA）はこの問題を軽減しましたが、意味のあるカスタムトランジションを作成することは、依然として複雑で壊れやすいタスクであり、JavaScriptライブラリや複雑な状態管理に大きく依存していました。

そこで登場するのがCSS View Transitions APIです。これは、ウェブ上でのUIの変更を扱う方法に革命をもたらす、画期的なテクノロジーです。この強力なAPIは、異なるDOMの状態間をアニメーションさせるためのシンプルでありながら非常に柔軟なメカニズムを提供し、ユーザーが期待する洗練されたアプリのような体験をこれまで以上に簡単に作成できるようにします。このAPIのパワーの中心にあるのが、新しいCSS疑似要素のセットです。これらは一般的なセレクターとは異なり、ブラウザによって動的に生成される一時的な要素であり、トランジションのあらゆる段階をきめ細かく制御することができます。このガイドでは、この疑似要素ツリーを深く掘り下げ、各コンポーネントをスタイリングして、世界中のオーディエンスのために、美しく、パフォーマンスが高く、アクセシブルなアニメーションを構築する方法を探ります。

ビュー・トランジションの構造

トランジションをスタイリングする前に、それがトリガーされたときに内部で何が起こるかを理解する必要があります。ビュー・トランジションを開始すると（例えば、document.startViewTransition()を呼び出すことによって）、ブラウザは一連のステップを実行します。

• 古い状態のキャプチャ：ブラウザは現在のページの状態の「スクリーンショット」を撮ります。
• DOMの更新：次にあなたのコードがDOMに変更を加えます（例：新しいビューへのナビゲート、要素の追加または削除）。
• 新しい状態のキャプチャ：DOMの更新が完了すると、ブラウザは新しい状態のスクリーンショットを撮ります。
• 疑似要素ツリーの構築：次にブラウザは、ページのオーバーレイに疑似要素の一時的なツリーを構築します。このツリーには、キャプチャされた古い状態と新しい状態の画像が含まれています。
• アニメーション：これらの疑似要素にCSSアニメーションが適用され、古い状態から新しい状態へのスムーズなトランジションが作成されます。デフォルトはシンプルなクロスフェードです。
• クリーンアップ：アニメーションが完了すると、疑似要素ツリーは削除され、ユーザーは新しいライブDOMと対話できるようになります。

カスタマイズの鍵は、この一時的な疑似要素ツリーです。これを、ページの上に一時的に配置されたデザインツールの一連のレイヤーと考えてください。これらのレイヤーに対して、完全なCSSコントロールが可能です。以下があなたが扱うことになる構造です。

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

これらの各疑似要素が何を表しているのかを詳しく見ていきましょう。

疑似要素のキャスト

::view-transition: これは構造全体におけるルートです。ビューポート全体を埋め、他のすべてのページコンテンツの上に配置される単一の要素です。すべてのトランジショングループのコンテナとして機能し、durationやtiming functionのような全体的なトランジションプロパティを設定するのに最適な場所です。

::view-transition-group(*): view-transition-name CSSプロパティによって識別される、各々のトランジション要素に対してグループが作成されます。この疑似要素は、そのコンテンツの位置とサイズのアニメーションを担当します。画面の一方の側から他方へ移動するカードがある場合、実際に移動しているのは::view-transition-groupです。

::view-transition-image-pair(*): グループ内にネストされており、この要素は古いビューと新しいビューのコンテナおよびクリッピングマスクとして機能します。その主な役割は、アニメーション中にborder-radiusやtransformのような効果を維持し、デフォルトのクロスフェードアニメーションを処理することです。

::view-transition-old(*): これは、要素の古い状態（DOM変更前）の「スクリーンショット」またはレンダリングされたビューを表します。デフォルトでは、opacity: 1からopacity: 0へとアニメーションします。

::view-transition-new(*): これは、要素の新しい状態（DOM変更後）の「スクリーンショット」またはレンダリングされたビューを表します。デフォルトでは、opacity: 0からopacity: 1へとアニメーションします。

ルート：::view-transition疑似要素のスタイリング

::view-transition疑似要素は、アニメーション全体が描かれるキャンバスです。トップレベルのコンテナとして、トランジション全体にグローバルに適用すべきプロパティを定義するのに理想的な場所です。デフォルトではブラウザがアニメーションのセットを提供しますが、簡単にオーバーライドできます。

例えば、デフォルトのトランジションは250ミリ秒続くクロスフェードです。サイト上のすべてのトランジションでこれを変更したい場合は、ルート疑似要素をターゲットにすることができます。

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

このシンプルなルールにより、すべてのデフォルトのページフェードが2倍の時間を要し、「ease-in-out」カーブを使用するようになり、少し異なる感触を与えます。ここで複雑なアニメーションを適用することもできますが、一般的には、より具体的な疑似要素に詳細な振り付けを任せ、普遍的なタイミングとイージングを定義するために使用するのが最善です。

グルーピングと命名：`view-transition-name`の力

追加の作業なしで、View Transition APIはページ全体のクロスフェードをデフォルトで提供します。これは、ルート用の単一の疑似要素グループによって処理されます。APIの真価が発揮されるのは、特定の個々の要素を状態間でトランジションさせたい場合です。例えば、リストページの商品サムネイルが、詳細ページのメイン商品画像の位置にシームレスに拡大・移動するようにする場合です。

異なるDOM状態にある2つの要素が概念的に同じものであることをブラウザに伝えるには、view-transition-name CSSプロパティを使用します。このプロパティは、開始要素と終了要素の両方に適用する必要があります。

/* リストページのCSS */

.product-thumbnail {

  view-transition-name: product-image;

}

/* 詳細ページのCSS */

.main-product-image {

  view-transition-name: product-image;

}

両方の要素に同じ一意の名前（この場合は「product-image」）を付けることで、ブラウザに「古いページをフェードアウトさせて新しいページをフェードインさせるだけでなく、この特定の要素のために特別なトランジションを作成せよ」と指示します。ブラウザは、ルートのフェードとは別にそのアニメーションを処理するために、専用の::view-transition-group(product-image)を生成します。これが、人気の「モーフィング」または「共有要素」トランジション効果を可能にする基本概念です。

重要な注意点：トランジション中のいかなる瞬間においても、view-transition-nameは一意でなければなりません。同時に同じ名前を持つ2つの可視要素を持つことはできません。

詳細なスタイリング：コア疑似要素

要素に名前を付けたので、ブラウザがそれらのために生成する特定の疑似要素のスタイリングに深く入っていくことができます。ここで、真にカスタムで表現力豊かなアニメーションを作成できます。

`::view-transition-group(name)`: ムーバー

グループの唯一の責任は、古い要素のサイズと位置から新しい要素のサイズと位置へと遷移することです。実際のコンテンツの外観は含まず、そのバウンディングボックスのみを含みます。動くフレームと考えてください。

デフォルトでは、ブラウザはそのtransformおよびwidth/heightプロパティをアニメーションさせます。これをオーバーライドして、異なる効果を作成できます。例えば、カーブしたパスに沿ってアニメーションさせることで動きに円弧を加えたり、移動中にスケールアップ・ダウンさせたりすることができます。

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

この例では、商品画像の動きにのみ特定のイージング関数を適用しており、ページの他の部分のデフォルトのフェードに影響を与えることなく、よりダイナミックで物理的な感触を与えています。

`::view-transition-image-pair(name)`: クリッパーとフェーダー

動くグループの中にネストされているimage-pairは、古いビューと新しいビューを保持します。これはクリッピングマスクとして機能するため、要素にborder-radiusがある場合、image-pairはサイズと位置のアニメーション全体を通してコンテンツがその半径でクリップされ続けることを保証します。そのもう一つの主な仕事は、古いコンテンツと新しいコンテンツの間のデフォルトのクロスフェードを調整することです。

視覚的な一貫性を確保したり、より高度な効果を作成したりするために、この要素をスタイリングしたい場合があります。考慮すべき重要なプロパティはisolation: isolateです。これは、子要素（oldとnew）で高度なmix-blend-mode効果を使用する予定がある場合に非常に重要です。なぜなら、新しいスタッキングコンテキストを作成し、ブレンディングがトランジショングループ外の要素に影響を与えるのを防ぐからです。

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)`と`::view-transition-new(name)`: 主役たち

これらは、DOM変更前後の要素の視覚的な外観を表す疑似要素です。ほとんどのカスタムアニメーション作業はここで行われます。デフォルトでは、ブラウザはopacityとmix-blend-modeを使用して、単純なクロスフェードアニメーションを実行します。カスタムアニメーションを作成するには、まずデフォルトのアニメーションをオフにする必要があります。

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

デフォルトのアニメーションが無効になったら、自由に独自のアニメーションを適用できます。いくつかの一般的なパターンを探ってみましょう。

カスタムアニメーション：スライド

クロスフェードの代わりに、コンテナのコンテンツをスライドインさせてみましょう。例えば、記事間をナビゲートするときに、新しい記事のテキストが右からスライドインし、古いテキストが左にスライドアウトするようにします。

まず、キーフレームを定義します。

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

次に、これらのアニメーションを「article-content」という名前の要素のoldおよびnew疑似要素に適用します。

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

カスタムアニメーション：3Dフリップ

よりドラマチックな効果のために、3Dカードフリップを作成できます。これには、transformプロパティをrotateYでアニメーションさせ、backface-visibilityも管理する必要があります。

/* グループには3Dコンテキストが必要です */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* image-pairも3Dコンテキストを維持する必要があります */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* 古いビューは0度から-180度までフリップします */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* 新しいビューは180度から0度までフリップします */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

実践例と高度なテクニック

理論は役立ちますが、実践的な応用こそが真の学びの場です。一般的なシナリオと、それらをビュー・トランジション疑似要素で解決する方法をいくつか見ていきましょう。

例：「モーフィング」するカードサムネイル

これは古典的な共有要素トランジションです。ユーザープロフィールのギャラリーを想像してください。各プロフィールはアバター付きのカードです。カードをクリックすると、その同じアバターが上部に目立つように表示される詳細ページに移動します。

ステップ1：名前を割り当てる

ギャラリーページで、アバター画像に名前を付けます。名前は各カードで一意である必要があり、例えばユーザーのIDに基づきます。

/* gallery-item.css内 */

.card-avatar { view-transition-name: avatar-user-123; }

プロフィール詳細ページでは、大きなヘッダーのアバターに全く同じ名前を付けます。

/* profile-page.css内 */

.profile-header-avatar { view-transition-name: avatar-user-123; }

ステップ2：アニメーションをカスタマイズする

デフォルトでは、ブラウザはアバターを移動・拡大縮小しますが、コンテンツもクロスフェードさせます。画像が同一の場合、このフェードは不要であり、わずかなちらつきを引き起こす可能性があります。これを無効にすることができます。

/* ここでのアスタリスク(*)は、任意の名前付きグループのワイルドカードです */

::view-transition-image-pair(*) {

  /* デフォルトのフェードを無効化 */

  animation-duration: 0s;

}

待ってください、フェードを無効にしたら、コンテンツはどうやって切り替わるのでしょうか？古いビューと新しいビューが同一である共有要素の場合、ブラウザは賢くもトランジション全体で1つのビューだけを使用します。`image-pair`は実質的に1つの画像しか保持していないため、フェードを無効にするとこの最適化が明らかになるだけです。コンテンツが実際に変更される要素の場合は、デフォルトのフェードの代わりにカスタムアニメーションを用意する必要があります。

アスペクト比の変更への対応

一般的な課題は、トランジションする要素のアスペクト比が変わるときに発生します。例えば、リストページの16:9の横長サムネイルが、詳細ページの1:1の正方形アバターに遷移する場合があります。ブラウザのデフォルトの動作は、幅と高さを独立してアニメーションさせるため、トランジション中に画像が押しつぶされたり引き伸ばされたりして見えます。

解決策はエレガントです。::view-transition-groupにサイズと位置の変更を任せ、その中の古い画像と新しい画像のスタイリングをオーバーライドします。

目標は、古い「スクリーンショット」と新しい「スクリーンショット」が歪むことなくコンテナを埋めるようにすることです。これは、幅と高さを100%に設定し、ブラウザのデフォルトのobject-fitプロパティ（元の要素から継承される）にスケーリングを正しく処理させることで実現できます。

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* コンテナを埋めることで歪みを防ぐ */

  width: 100%;

  height: 100%;

  

  /* 効果を明確に見るためにデフォルトのクロスフェードをオーバーライド */

  animation: none;

}

このCSSを使用すると、`image-pair`はそのアスペクト比をスムーズにアニメーションさせ、中の画像は通常のコンテナ内と同じように、`object-fit`の値に応じて正しくトリミングまたはレターボックス化されます。その後、この修正されたジオメトリの上に、クロスフェードなどの独自のカスタムアニメーションを追加できます。

デバッグとブラウザサポート

ほんの一瞬しか存在しない要素をスタイリングするのは難しい場合があります。幸いなことに、現代のブラウザはこれに対応する優れた開発者ツールを提供しています。ChromeまたはEdgeのDevToolsでは、「Animations」パネルに移動し、ビュー・トランジションをトリガーしたときにそれを一時停止できます。アニメーションを一時停止した状態で、「Elements」パネルを使用して、DOMの他の部分と同じように`::view-transition`疑似要素ツリー全体を検査できます。適用されているスタイルを確認したり、リアルタイムで変更してアニメーションを完成させたりすることもできます。

2023年後半現在、View Transitions APIはChromiumベースのブラウザ（Chrome、Edge、Opera）でサポートされています。FirefoxとSafariでの実装も進行中です。これにより、プログレッシブエンハンスメントの完璧な候補となります。サポートされているブラウザのユーザーは快適で強化された体験を得られ、他のブラウザのユーザーは標準的な即時ナビゲーションを得られます。CSSでサポートをチェックできます。

@supports (view-transition: none) {

  /* すべてのview-transitionスタイルはここに記述します */

  ::view-transition-old(my-element) { ... }

}

グローバルなオーディエンスのためのベストプラクティス

アニメーションを実装する際には、世界中の多様なユーザーやデバイスを考慮することが不可欠です。

パフォーマンス：アニメーションは高速で滑らかでなければなりません。ブラウザが処理するのにコストが低いCSSプロパティ、主にtransformとopacityのアニメーションに固執してください。width、height、marginのようなプロパティをアニメーションさせると、フレームごとにレイアウトの再計算がトリガーされ、特に低スペックのデバイスではカクつきや劣悪な体験につながる可能性があります。

アクセシビリティ：一部のユーザーは、アニメーションによって乗り物酔いや不快感を経験します。すべての主要なオペレーティングシステムは、動きを減らすためのユーザー設定を提供しています。私たちはこれを尊重しなければなりません。prefers-reduced-motionメディアクエリを使用すると、これらのユーザーのためにアニメーションを無効にしたり、簡素化したりできます。

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* すべてのカスタムアニメーションをスキップし、素早くシンプルなフェードを使用する */

    animation: none !important;

  }

}

ユーザーエクスペリエンス（UX）：良いトランジションには目的があります。ユーザーの注意を導き、UIで起こっている変化についてのコンテキストを提供すべきです。遅すぎるアニメーションはアプリケーションを鈍重に感じさせ、派手すぎるアニメーションは注意を散漫にさせることがあります。トランジションの持続時間は200msから500msを目指してください。目標は、アニメーションが見られる以上に感じられることです。

結論：流れるような未来へ

CSS View Transitions API、特にその強力な疑似要素ツリーは、ウェブのユーザーインターフェースにとって記念碑的な飛躍を表しています。これは、かつてはネイティブアプリケーションの専売特許であった、流れるようなステートフルなトランジションを作成するための、ネイティブでパフォーマンスが高く、高度にカスタマイズ可能なツールセットを開発者に提供します。::view-transition、::view-transition-group、そしてold/newイメージペアの役割を理解することで、単純なフェードを超え、ユーザビリティを高め、ユーザーを喜ばせる、複雑で意味のあるアニメーションを振り付けることができます。

ブラウザのサポートが拡大するにつれて、このAPIは現代のフロントエンド開発者のツールキットの不可欠な部分になるでしょう。その能力を受け入れ、パフォーマンスとアクセシビリティのベストプラクティスを遵守することで、私たちは機能的であるだけでなく、世界中のすべての人にとってより美しく、直感的なウェブを構築することができます。