@view-transition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

@view-transition は CSS のアットルールで、文書間のナビゲーションの場合に、移動元及び移動先の文書でビュー遷移を行うように指定するために使用します。

文書間のビュー遷移を機能させるには、ナビゲーションの移動元と移動先の文書が同じオリジンにある必要があります。

構文

css
@view-transition {
  navigation: auto;
}

記述子

このアットルールが文書内のビュー遷移の動作に与える効果を指定します。 可能な値は以下のとおりです。

  • auto: この文書でビュー遷移が発生するのは、同一オリジン内のナビゲーションで、オリジン間リダイレクトがなく、navigationType がtraverse、push、replace のいずれかである場合です。push または replace の場合、ナビゲーションはブラウザーの UI 機能ではなく、ページコンテンツを操作するユーザーによって開始されたものでなければなりません。

  • none: この文書でビュー遷移は発生しません。

形式文法

@view-transition = 
  @view-transition { <declaration-list> }

例

ページビューの遷移

以下のコードスニペットは、ページ遷移のデモで使用される主要な概念を示しています。 このデモでは、文書間のビュー遷移を使用しています。これは、同一サイトの 2 つのページ間を移動する際に発生する 0.5 秒の遷移です。 デモ全体については、View transitions multi-page app demo をご覧ください。

@view-transition アットルールは、ナビゲーションの移動元と移動先の両方の文書内の CSS で指定することで、ビュー遷移が有効になります。

css
@view-transition {
  navigation: auto;
}

@view-transition アットルールに加えて、2 つの @keyframes アニメーションを定義し、animation 一括指定プロパティを使用して、アニメーションさせたい流出側 (::view-transition-old()) および流入側 (::view-transition-new()) ページの要素にそれらのキーフレームアニメーションを適用します。

css
/* 独自アニメーションの作成 */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

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

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* 独自アニメーションを新旧のページ状態に適用 */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

transitions multi-page app デモをライブで参照してください。

仕様書

Specification
CSS View Transitions Module Level 2
# view-transition-rule

ブラウザーの互換性

BCD tables only load in the browser

関連情報