切り替え効果

CSS ポッドキャスト - 044: 遷移

ウェブサイトを操作するとき、多くの要素に「状態」stateがあることに気づくかもしれません。たとえば、プルダウンには開いた状態と閉じた状態があります。フォーカスしたときやカーソルを合わせたときに、ボタンの色が変わることがあります。モーダルの表示と非表示が切り替わります。

デフォルトでは、CSS はこれらの状態のスタイルを瞬時に切り替えます。

CSS 遷移を使用すると、要素の初期状態とターゲット状態を補間できます。この 2 つの画面間の移行により、操作の原因と結果について視覚的な指示、サポート、ヒントが提供され、ユーザー エクスペリエンスが向上します。

遷移プロパティ

CSS で遷移を使用するには、さまざまな遷移プロパティか transition 省略形プロパティを使用します。

遷移プロパティ

transition-property プロパティでは、移行するスタイルを指定します。

.my-element {
  transition-property: background-color;
}

transition-property には、1 つ以上の CSS プロパティ名をカンマ区切りリストで指定します。

必要に応じて、transition-property: all を使用して、すべてのプロパティを移行するよう指定できます。

移行の所要時間

transition-duration プロパティは、移行が完了するまでの時間を定義するために使用されます。

transition-duration は、時間単位を秒（s）またはミリ秒（ms）のいずれかで受け取ります。デフォルトは 0s です。

遷移タイミング関数

transition-timing-function プロパティを使用すると、transition-duration の過程での CSS の遷移速度を変更できます。

デフォルトでは、CSS は一定の速度（transition-timing-function: linear）で要素を移行します。直線的な移行は、最終的には若干人為的に見えることがあります。ただし、現実には、オブジェクトに重みがあり、すぐに停止して開始することはできません。トランジションの開始時と終了時には、より活気に満ちた自然なトランジションを実現できます。

CSS アニメーションに関するモジュールで、タイミング関数について大まかに説明しています。

DevTools を使用すると、さまざまなタイミング機能をリアルタイムで試すことができます。

移行の遅延

transition-delay プロパティを使用して、遷移の開始時刻を指定します。transition-duration を指定しない場合、デフォルト値は 0s であるため、遷移がすぐに開始されます。このプロパティでは、秒（s）やミリ秒（ms）などの時間単位を指定できます。

このプロパティは、グループ内の後続の各要素に長い transition-delay を設定することで、タイミングをずらす遷移に便利です。

transition-delay はデバッグにも役立ちます。この遅延を負の値に設定すると、さらにタイムラインのより先に遷移を開始できます。

省略形: 遷移

ほとんどの CSS プロパティと同様に、簡易版があります。transition は、transition-property、transition-duration、transition-timing-function、transition-delay を結合します。

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

移行できるものとできないもの

CSS を記述する際、どのプロパティに遷移をアニメーション化するかを指定できます。アニメーション化可能な CSS プロパティの MDN リストをご覧ください。

一般に、開始状態と最終状態の間の「中間状態」にある要素のみを遷移できます。たとえば、font-family に遷移を追加することはできません。これは、serif と monospace の「中間状態」がどのようなものなのかが不明確であるためです。一方、font-size の単位は補間可能な長さであるため、切り替え効果を追加できます。

移行できる一般的なプロパティには、次のようなものがあります。

変換

transform CSS プロパティは、GPU アクセラレーションによってアニメーションがよりスムーズになり、バッテリー消費量も少ないため、一般的に移行されます。このプロパティを使用すると、要素を自由にスケーリング、回転、変換、スキューできます。

Functions モジュールの変換に関するセクションをご覧ください。

色

色は、インタラクションの前、最中、後で、状態の優れた指標となります。たとえば、ボタンにカーソルを合わせると色が変わることがあります。この色の変更により、ボタンがクリック可能であることをユーザーに伝えることができます。

color、background-color、border-color の各プロパティは、操作時に色を遷移できる場所のほんの一例です。

色に関するモジュールをご確認ください。

影

多くの場合、シャドウは、ユーザーがフォーカスしたときなど、高度の変化を示すために移行されます。

シャドウに関するモジュールをご確認ください。

フィルタ

filter は、グラフィック効果をすぐに追加できる強力な CSS プロパティです。filter のさまざまな状態を遷移することで、かなり素晴らしい結果を得ることができます。

フィルタに関するモジュールをご覧ください。

移行トリガー

CSS には、状態の変更と、その状態変更をトリガーするイベントが含まれている必要があります。このようなトリガーの典型的な例は、:hover 疑似クラスです。この疑似クラスは、ユーザーが要素にカーソルを合わせたときに一致します。

要素の状態変化をトリガーできる疑似クラスとイベントのリストを以下に示します。

• :hover: カーソルが要素上にある場合に一致します。
• :focus: 要素がフォーカスされている場合に一致します。
• :focus-within : 要素またはその子孫がフォーカスされている場合に一致します。
• :target: 現在の URL のフラグメントが要素の ID と一致する場合に一致します。
• :active: 要素がアクティブになっているとき（通常はマウスが押されたとき）に一致します。
• JavaScript からの class の変更: JavaScript を使用して要素の CSS class が変更されると、CSS は変更された有効なプロパティを移行します。

開始と終了で異なる遷移

ホバーまたはフォーカスに対して異なる transition プロパティを設定することで、興味深い効果を生み出すことができます。

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

ユーザー補助に関する考慮事項

CSS の移行は、すべての人に適しているわけではありません。画面の切り替えやアニメーションのせいで、乗り物酔いや不快感を感じる人もいらっしゃいます。幸いなことに、CSS には prefers-reduced-motion というメディア機能があります。この機能では、ユーザーがデバイスからのモーションの少ない操作を選択したかどうかを検出します。

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

このメディア機能について詳しくは、ブログ投稿「prefers-reduced-motion: 動きが少ない方がよい場合がある」をご覧ください。

パフォーマンスに関する注意事項

CSS 遷移を使用する際、特定の CSS プロパティに遷移を追加するとパフォーマンスの問題が発生することがあります。たとえば、width や height などのプロパティが変更されると、ページの他の部分にコンテンツがプッシュされます。これにより、CSS は遷移のフレームごとに影響を受けるすべての要素の新しい位置を計算します。可能であれば、代わりに transform や opacity などのプロパティを使用することをおすすめします。

このトピックの詳細については、高パフォーマンスの CSS アニメーションに関するガイドをご覧ください。

理解度チェック

移行に関する知識をテストする