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 を使用して要素の CSSclass
が変更されると、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 アニメーションに関するガイドをご覧ください。
理解度チェック
移行に関する知識をテストする
イージングを指定するための遷移プロパティはどれですか。
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
transition-property: all
を使用することをおすすめします。
all
を指定すると、パフォーマンスの問題や意図しない移行が発生する可能性があります。すべてのプロパティを移行できます。
font-family
などのプロパティは移行できません。