CSS と UI の新機能: I/O 2023 Edition

Una Kravets
Bramus
Adam Argyle

ここ数か月で、ウェブ UI は黄金時代を迎えました。新しいプラットフォーム機能がリリースされ、クロスブラウザでの採用が緊密に行われています。これにより、これまで以上に多くのウェブ機能とカスタマイズ機能がサポートされます。

最近リリースされた、または近日リリース予定の、特にエキサイティングで影響力の大きい 20 個の機能をご紹介します。

新しいレスポンシブ

レスポンシブ デザインの新しい機能から始めましょう。新しいプラットフォーム機能により、レスポンシブ スタイリング情報を所有するコンポーネントを使用して論理インターフェースを構築したり、システム機能を活用してよりネイティブな UI を提供するインターフェースを構築したり、ユーザー設定クエリを使用してユーザーが設計プロセスに参加できるようにして完全なカスタマイズ性を実現したりできます。

コンテナクエリ

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

コンテナ クエリは、最近すべての最新ブラウザで安定版になりました。これらを使用すると、親要素のサイズとスタイルをクエリして、その子要素に適用するスタイルを決定できます。メディアクエリはビューポートの情報にのみアクセスして活用できるため、ページ レイアウトのマクロビューでのみ機能します。一方、コンテナ クエリは、任意の数のレイアウトやレイアウト内のレイアウトをサポートできる、より正確なツールです。

次の受信トレイの例では、[メインの受信トレイ] と [お気に入り] のサイドバーはどちらもコンテナです。メール内のグリッド レイアウトが調整され、利用可能なスペースに基づいてメールのタイムスタンプが表示または非表示になります。これはページ内のまったく同じコンポーネントですが、異なるビューで表示されています

コンテナ クエリがあるため、これらのコンポーネントのスタイルは動的です。ページサイズとレイアウトを調整すると、コンポーネントは個別に割り当てられたスペースに応じて調整されます。サイドバーが上部のバーになり、スペースが広がり、メインの受信トレイのようなレイアウトになります。スペースが少ない場合は、両方とも縮小形式で表示されます。

コンテナ クエリと論理コンポーネントの構築については、こちらの投稿をご覧ください。

スタイルクエリ

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

コンテナ クエリの仕様では、親コンテナのスタイル値のクエリも許可されています。これは現在 Chrome 111 で部分的に実装されており、CSS カスタム プロパティを使用してコンテナ スタイルを適用できます。

次の例では、雨、晴れ、曇りなどのカスタム プロパティ値に保存されている天気の特徴を使用して、カードの背景とインジケーター アイコンのスタイルを設定します。

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

天気カードのデモ。

スタイルクエリはまだ始まったばかりです。今後、カスタム プロパティ値が存在するかどうかを判断してコードの繰り返しを減らすブール値クエリが導入される予定です。また、値の範囲に基づいてスタイルを適用する範囲クエリも現在検討中です。これにより、降水確率や雲量のパーセント値を使用して、ここに示されているスタイルを適用できるようになります。

詳しくは、スタイルクエリに関するブログ投稿をご覧ください。

:has()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

強力な動的機能といえば、:has() セレクタは、最新のブラウザに搭載される最も強力な新しい CSS 機能の 1 つです。:has() を使用すると、親要素に特定の子要素が含まれているかどうか、またはその子要素が特定の状態にあるかどうかを確認して、スタイルを適用できます。つまり、親セレクタができました。

コンテナ クエリの例を基に、:has() を使用してコンポーネントをさらに動的にすることができます。この例では、星の要素を持つアイテムにはグレーの背景が適用され、チェックボックスがオンになっているアイテムには青の背景が適用されます。

デモのスクリーンショット

ただし、この API は親の選択に限定されません。親内の子要素のスタイルを設定することもできます。たとえば、アイテムに星要素がある場合、タイトルは太字になります。これは .item:has(.star) .title で行います。:has() セレクタを使用すると、親要素、子要素、兄弟要素にアクセスできるため、非常に柔軟な API となり、新しいユースケースが毎日生まれています。

詳細とデモについては、:has() に関するこちらのブログ投稿をご覧ください。

nth-of 構文

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

ウェブ プラットフォームで、より高度な nth-child 選択が可能になりました。高度な nth-child 構文では、新しいキーワード（「of」）が導入されています。これにより、既存の An+B のマイクロ構文を使用して、検索対象のより具体的なサブセットを指定できます。

特別なクラスで :nth-child(2) などの通常の nth-child を使用すると、ブラウザはクラス special が適用され、2 番目の子でもある要素を選択します。これは、最初にすべての .special 要素を事前フィルタリングしてから、そのリストから 2 番目の要素を選択する :nth-child(2 of .special) とは対照的です。

この機能について詳しくは、nth-of 構文に関する記事をご覧ください。

text-wrap: balance

セレクタとスタイルクエリは、スタイル内にロジックを埋め込むことができる唯一の場所ではありません。タイポグラフィもその 1 つです。Chrome 114 以降では、text-wrap プロパティに balance の値を指定して、見出しのテキスト折り返しを調整できます。

デモを試す

テキストのバランスを取るため、ブラウザは追加の行が発生しない最小の幅を効果的にバイナリ検索し、1 CSS ピクセル（ディスプレイ ピクセルではない）で停止します。バイナリ検索の手順をさらに最小限に抑えるため、ブラウザは平均行幅の 80% から開始します。

デモを試す

詳しくは、こちらの記事をご覧ください。

initial-letter

Browser Support

  • Chrome: 110.
  • Edge: 110.
  • Firefox: not supported.
  • Safari: 9.

Source

ウェブ タイポグラフィのもう一つの優れた改善点は initial-letter です。この CSS プロパティを使用すると、インセット ドロップ キャップのスタイルをより細かく制御できます。

:first-letter 疑似要素の initial-letter を使用して、文字が占める行数に基づいて文字のサイズを指定します。文字のブロック オフセット（「シンク」）。文字が配置される場所です。

intial-letter の使用について詳しくは、こちらをご覧ください。

動的ビューポート単位

Browser Support

  • Chrome: 108.
  • Edge: 108.
  • Firefox: 101.
  • Safari: 15.4.

ウェブ デベロッパーが今日直面する一般的な問題の 1 つは、特にモバイル デバイスでの正確で一貫性のあるフルビューポートのサイズ設定です。デベロッパーは 100vh（ビューポートの高さの 100%）を「ビューポートと同じ高さにする」という意味で使いたいのですが、vh 単位はモバイルでのナビゲーション バーの折りたたみなどを考慮しないため、長くなりすぎてスクロールが発生することがあります。

スクロールバーが多すぎる

この問題を解決するため、ウェブ プラットフォームに新しい単位値が追加されました。たとえば、次のようなものがあります。 - 小さいビューポートの高さと幅（または svh と svw）。これは、アクティブなビューポートの最小サイズを表します。- 最大サイズを表す、大きなビューポートの高さと幅（lvh と lvw）。- 動的なビューポートの高さと幅（dvh と dvw）。

動的ビューポート単位は、上部のアドレスバーや下部のタブバーなどの追加の動的ブラウザ ツールバーが表示されているときと表示されていないときで値が変化します。

新しいビューポート単位の可視化

これらの新しい単位について詳しくは、ラージ、スモール、ダイナミック ビューポート単位をご覧ください。

広色域の色空間

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.4.

Source

ウェブ プラットフォームに新たに追加された重要な機能として、広色域の色空間があります。ウェブ プラットフォームで広色域が利用可能になる前は、鮮やかな色で写真を撮って最新のデバイスで表示することはできましたが、ボタン、テキストの色、背景をそれらの鮮やかな値に合わせることはできませんでした。

一連の画像が、広色域と狭色域の間でトランジションしながら表示され、色の鮮やかさとその効果が示されています。
実際に試してみる

しかし、現在では REC2020、P3、XYZ、LAB、OKLAB、LCH、OKLCH など、ウェブ プラットフォームでさまざまな新しい色空間を利用できます。新しいウェブカラー スペースなどについては、HD カラーガイドをご覧ください。

新しい各カラースペースの関係とサイズを示す、さまざまな色の 5 つの三角形が積み重ねられています。

DevTools で、色域が拡大されたことをすぐに確認できます。白い線は、srgb 範囲の終わりと、より広い色域の始まりを示しています。

カラー選択ツールにガマット線が表示されている DevTools。

色に関するツールがさらにたくさん用意されています。グラデーションの改善もぜひお試しください。Adam Argyle が構築した新しいツールもあります。このツールを使用すると、新しいウェブ カラー選択ツールとグラデーション ビルダーを試すことができます。gradient.style でお試しください。

color-mix()

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Source

拡張された色空間をさらに拡張する関数が color-mix() です。この関数は、2 つの色値を混合して、混合する色のチャネルに基づいて新しい値を作成することをサポートします。ミックスする色空間によって結果が異なります。oklch などのより知覚的な色空間で作業すると、srgb などの色空間とは異なる色範囲が使用されます。

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);
7 つの色空間（srgb、linear-srgb、lch、oklch、lab、oklab、xyz）がそれぞれ異なる結果を示している。多くはピンクや紫で、青色のものはほとんどありません。
デモを試す

color-mix() 関数は、長らくリクエストされていた機能を提供します。それは、不透明な色の値を保持しながら、透明度を追加する機能です。これで、ブランドカラーの変数を使いながら、さまざまな不透明度のカラーバリエーションを作成できます。これを行うには、色を透明と混ぜ合わせます。ブランドカラーの青を 10% 透明にすると、90% 不透明なブランドカラーになります。これにより、カラーシステムをすばやく構築できます。

この機能は、Chrome DevTools の [スタイル ペイン] で、プレビューのベン図アイコンとして表示されます。

ベン図のカラーミックス アイコンが表示された DevTools のスクリーンショット

その他の例や詳細については、color-mix に関するブログ投稿をご覧ください。また、この color-mix() プレイグラウンドもお試しください。

CSS の基礎

ユーザーにとって明確なメリットがある新機能を構築することは、方程式の一部にすぎません。Chrome に導入される多くの機能は、デベロッパー エクスペリエンスの向上と、より信頼性が高く整理された CSS アーキテクチャの作成を目的としています。これらの機能には、CSS ネスト、カスケード レイヤ、スコープ スタイル、三角関数、個々の変換プロパティなどがあります。

ネスト

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

CSS ネスティングは、Sass で人気の機能であり、CSS デベロッパーから長年要望の多かった機能の 1 つですが、ついにウェブ プラットフォームに導入されます。ネストを使用すると、冗長性を減らす、より簡潔なグループ化された形式で記述できます。

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

メディアクエリをネストすることもできます。つまり、コンテナクエリをネストすることもできます。次の例では、コンテナに十分な幅がある場合、カードが縦向きレイアウトから横向きレイアウトに変更されます。

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

flex へのレイアウト調整は、コンテナに 480px 以上のインライン スペースがある場合に発生します。ブラウザは、条件が満たされたときに新しい表示スタイルを適用するだけです。

詳細と例については、CSS ネストに関する投稿をご覧ください。

カスケード レイヤ

Browser Support

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

Source

開発者が抱えるもう 1 つの課題は、どのスタイルが他のスタイルよりも優先されるかの一貫性を確保することです。この課題を解決する 1 つの方法は、CSS カスケードをより適切に制御することです。

カスケード レイヤは、どのレイヤの優先順位を高くするかをユーザーが制御できるようにすることで、この問題を解決します。つまり、スタイルが適用されるタイミングをより細かく制御できます。

カスケードのイラスト

Codepen プロジェクトのスクリーンショット
Codepen でプロジェクトを確認

カスケード レイヤの使用方法については、こちらの記事をご覧ください。

スコープ付き CSS

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

CSS スコープ スタイルを使用すると、特定のスタイルが適用される境界を指定できます。これは、CSS でネイティブ名前空間を作成するのと同様です。これまで、デベロッパーはクラスの名前変更にサードパーティのスクリプトを使用するか、スタイル競合を防ぐために特定の命名規則に依存していましたが、まもなく @scope を使用できるようになります。

ここでは、.title 要素を .card にスコープ設定しています。これにより、そのタイトル要素が、ブログ投稿のタイトルや他の見出しなど、ページ上の他の .title 要素と競合することを防ぐことができます。

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

このライブデモでは、@scope とスコープ制限、@layer を確認できます。

デモのカードのスクリーンショット

@scope の詳細については、css-cascade-6 仕様をご覧ください。

三角関数

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

新しい CSS の配管のもう 1 つは、既存の CSS 数学関数に追加される三角関数です。これらの関数は、最新のすべてのブラウザで安定して動作するようになり、ウェブ プラットフォームでより自然なレイアウトを作成できるようになりました。たとえば、この放射状メニュー レイアウトは、sin() 関数と cos() 関数を使用して設計し、アニメーション化できるようになりました。

次のデモでは、点が中心点を中心に回転します。各ドットをそれぞれの中心の周りで回転させてから外側に移動させるのではなく、各ドットは X 軸と Y 軸で変換されます。X 軸と Y 軸の距離は、それぞれ --angle の cos() と sin() を考慮して決定されます。

このトピックの詳細については、三角関数に関する記事をご覧ください。

個々の変換プロパティ

Browser Support

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Source

個々の変換関数により、デベロッパーのエルゴノミクスが引き続き改善されます。前回の I/O 以降、個々の変換はすべての最新ブラウザで安定しました。

以前は、変換関数を使用して、UI 要素の拡大縮小、回転、移動を行うサブ関数を適用していました。この作業は繰り返しが多く、アニメーションのさまざまなタイミングで複数の変換を適用する場合は特に面倒でした。

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

変換の種類を分離して個別に適用することで、CSS アニメーションでこの詳細情報をすべて取得できるようになりました。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

これにより、アニメーションのさまざまなタイミングで、異なる変化率で同時に変換、回転、拡大縮小を行うことができます。

詳細については、個々の変換関数に関する投稿をご覧ください。

カスタマイズ可能なコンポーネント

ウェブ プラットフォームを通じてデベロッパーの主なニーズを解決するため、OpenUI コミュニティ グループと協力して、まず 3 つのソリューションを特定しました。

  1. イベント ハンドラ、宣言型 DOM 構造、アクセシビリティに配慮したデフォルトを備えた組み込みのポップアップ機能。
  2. 2 つの要素を互いに固定してアンカー位置決めを可能にする CSS API。
  3. select 内のコンテンツのスタイルを設定する場合に使用する、カスタマイズ可能なプルダウン メニュー コンポーネント。

ポップオーバー

ポップオーバー API を使用すると、要素に次のようなブラウザ サポートの組み込み機能が追加されます。

  • トップレイヤのサポートにより、z-index を管理する必要がありません。ポップオーバーやダイアログを開くと、その要素がページの一番上の特別なレイヤに昇格します。
  • auto ポップオーバーのライト ディスミス動作が無料になりました。要素の外側をクリックすると、ポップオーバーが閉じられ、ユーザー補助ツリーから削除され、フォーカスが適切に管理されます。
  • ポップオーバーのターゲットとポップオーバー自体の結合組織のデフォルトのアクセシビリティ。

つまり、これらの機能をすべて作成し、これらの状態をすべて追跡するために記述する必要がある JavaScript の量が少なくなります。

ポップオーバーの例

ポップオーバーの DOM 構造は宣言型であり、ポップオーバー要素に id と popover 属性を指定するのと同じくらい明確に記述できます。次に、その ID をポップオーバーを開く要素（popovertarget 属性を持つボタンなど）に同期します。

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover は popover=auto の省略形です。popover=auto を持つ要素は、開いたときに他のポップオーバーを強制的に閉じ、開いたときにフォーカスを受け取り、ライト ディスミスできます。逆に、popover=manual 要素は他の要素タイプを強制的に閉じたり、すぐにフォーカスを受け取ったり、ライト ディスミスしたりしません。切り替えまたはその他の閉じる操作で閉じます。

ポップオーバーに関する最新のドキュメントは、現在 MDN でご覧いただけます。

アンカーの配置

ポップオーバーは、通常は特定の要素にアンカーする必要があるダイアログやツールチップなどの要素でも頻繁に使用されます。次のイベントの例を見てみましょう。カレンダーの予定をクリックすると、クリックした予定の近くにダイアログが表示されます。カレンダー アイテムがアンカーで、ポップオーバーがイベントの詳細を表示するダイアログです。

anchor() 関数を使用して、アンカーの幅を使用してツールチップをアンカーの x 位置の 50% に配置し、中央揃えのツールチップを作成できます。次に、既存の配置の値を使用して、残りのプレースメント スタイルを適用します。

しかし、ポップオーバーの配置方法によっては、ビューポートに収まらない場合があります。

ビューポートからポップオーバーが飛び出している

この問題を解決するため、アンカー ポジショニング API には、カスタマイズ可能なフォールバック ポジションが含まれています。次の例では、「top-then-bottom」というフォールバック位置を作成します。ブラウザはまず、ツールチップを上部に配置しようとします。ビューポートに収まらない場合は、アンカー要素の下部、つまり下部に配置します。

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

アンカーの位置決めについて詳しくは、こちらのブログ投稿をご覧ください。

<selectmenu>

ポップオーバーとアンカーの両方の配置を使用して、完全にカスタマイズ可能な selectmenu を構築できます。OpenUI コミュニティ グループは、これらのメニューの基本的な構造を調査し、メニュー内のコンテンツをカスタマイズできるようにする方法を検討してきました。次の視覚的な例をご覧ください。

selectmenu の例

左端の selectmenu の例（カレンダーの予定に表示される色に対応する色付きのドット）を作成するには、次のように記述します。

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

離散プロパティのトランジション

これらすべてをスムーズにポップオーバーの表示と非表示に切り替えるには、ウェブで個別のプロパティをアニメーション化する方法が必要です。これらは、通常はアニメーション化できなかったプロパティです。たとえば、トップレイヤとの間でのアニメーションや、display: none との間でのアニメーションなどです。

ポップオーバー、セレクトメニュー、ダイアログやカスタム コンポーネントなどの既存の要素のスムーズな切り替えを可能にする作業の一環として、ブラウザではこれらのアニメーションをサポートするための新しい配管が有効になっています。

次のポップオーバーのデモでは、開いた状態に :popover-open、開く前の状態に @starting-style を使用してポップオーバーをアニメーションで表示 / 非表示にし、開いてから閉じた状態の要素に直接変換値を適用しています。これをディスプレイで機能させるには、次のように transition プロパティに追加する必要があります。

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

インタラクション数

これで、ウェブ UI 機能のツアーの最後の目的地であるインタラクションに到着しました。

離散プロパティのアニメーションについてはすでに説明しましたが、スクロール駆動型アニメーションとビュー トランジションに関する非常にエキサイティングな API も Chrome に実装されています。

スクロールドリブン アニメーション

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

スクロールドリブン アニメーションを使用すると、スクロール コンテナのスクロール位置に基づいてアニメーションの再生を制御することができます。つまり、上下にスクロールすると、アニメーションが前方または後方にスクラブされます。また、スクロールドリブン アニメーションを使用すると、スクロール コンテナ内の要素の位置に基づいてアニメーションを制御することもできます。これにより、視差効果のある背景画像、スクロールの進行状況バー、ビューに入ったときに出現する画像など、面白い視覚効果を作成することができます。

この API は、宣言型のスクロールドリブン アニメーションを簡単に作成できる一連の JavaScript クラスと CSS プロパティをサポートしています。

スクロールで CSS アニメーションを駆動するには、新しい scroll-timeline、view-timeline、animation-timeline プロパティを使用します。JavaScript Web Animations API を駆動するには、Element.animate() に timeline オプションとして ScrollTimeline または ViewTimeline インスタンスを渡します。

これらの新しい API は、既存の Web Animations API や CSS Animations API と一緒に機能します。つまり、これらの API の利点を活用できます。これには、これらのアニメーションをメインスレッドから実行する機能が含まれます。はい、そのとおりです。数行のコードを追加するだけで、スクロールによって駆動される、メインスレッド外で実行される、滑らかなアニメーションを実現できます。ぜひお試しください。

スクロール連動アニメーションの作成方法について詳しくは、スクロール連動アニメーションに関するこちらの記事をご覧ください。

遷移を表示する

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

View Transition API を使用すると、2 つの状態間のアニメーション遷移を作成しながら、DOM を 1 つのステップで簡単に変更できます。ビュー間のシンプルなフェードも可能ですが、ページの個々の部分がどのように遷移するかを制御することもできます。

ビュー遷移はプログレッシブ エンハンスメントとして使用できます。DOM を更新するコードを任意のメソッドで取得し、ビュー遷移 API でラップして、この機能をサポートしていないブラウザ用のフォールバックを追加します。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

移行の見た目は CSS で制御される

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Maxi Ferreira 氏によるこちらの素晴らしいデモで示されているように、ビューの切り替え中も、動画の再生などの他のページ操作は継続されます。

現在、View Transitions は Chrome 111 以降のシングルページ アプリケーション（SPA）で動作します。複数ページのアプリのサポートについては現在対応中です。詳しくは、ビュー遷移ガイドをご覧ください。

まとめ

CSS と HTML の最新のランディングについては、developer.chrome.com でご確認ください。また、ウェブのランディングについては、I/O の動画をご覧ください。