CSS/@view-transition

@view-transition

@view-transitionは、ページや要素間の視覚的な遷移をスムーズにするためのCSS at-ruleです。このルールを使用すると、状態の変更（ページ遷移や要素の表示切り替えなど）におけるアニメーションを簡単にカスタマイズできます。

@view-transitionは新しい機能であり、主にシングルページアプリケーション（SPA）や動的なUIにおけるユーザー体験を向上させるために設計されています。

構文

基本的な構文は以下の通りです：

@view-transition {
  /* 遷移時のスタイル */
}

このルール内で、遷移に関連するスタイルを定義します。

使用例

以下は、@view-transitionを使用した基本的な例です。

@view-transition {
  .view-transition-name {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  }
}

ここでは、view-transition-nameというクラスに遷移時のトランスフォームと不透明度アニメーションを適用しています。

要素の遷移

特定の要素間での遷移をカスタマイズできます。

@view-transition {
  .view-transition-group {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .view-transition-group::view-transition-old {
    opacity: 1;
    transform: translateY(0);
  }

  .view-transition-group::view-transition-new {
    opacity: 0;
    transform: translateY(-10px);
  }
}

この例では、遷移前後の状態を個別にスタイル指定しています。

特徴

• カスタマイズ可能な遷移: 要素やページ全体の遷移を直感的に定義可能。
• 組み込みセレクター: 遷移の旧状態（::view-transition-old）と新状態（::view-transition-new）にスタイルを適用可能。
• スムーズなアニメーション: 状態の変化を視覚的に連続的に表現。

注意事項

• ブラウザのサポート状況: @view-transitionは実験的な機能であり、一部の最新ブラウザでのみサポートされています。
• 依存関係: JavaScriptと組み合わせて使用されることが多い機能です。
• パフォーマンス考慮: 過剰なアニメーションはパフォーマンスに影響を与える可能性があります。

ブラウザ対応状況

ブラウザ	サポート
Google Chrome	部分的対応
Microsoft Edge	部分的対応
Firefox	対応予定
Safari	未対応

最新のブラウザ対応状況はCan I Useで確認してください。

関連情報

• MDN: @view-transition
  • View Transitions API (MDN)
  • CSSのトランジションとアニメーション
• CSSWG: The @view-transition rule
• Can I use: @view-transition

@view-transitionは、動的で直感的なUIを実現するための強力なツールです。特に、ユーザー体験を向上させたいアプリケーション開発者にとって、重要な機能となります。