#137
UI設計パターン
#137しーえすえすとらんじしょん
CSS Transition
別名・表記:CSS TransitionTransition Property
UIXHERO Definition
「CSSだけで動かす」。JavaScriptを使わずに、ホバー時の色変化などを滑らかにする技術。
概要
W3Cによって標準化されたWeb技術。 JavaScriptよりも宣言的に記述でき、ブラウザ最適化が効きやすいため、シンプルなUI変化には適している。
UXでの活用
- 変化の示唆: 色やサイズが「パッ」と変わるよりも「ジワッ」と変わることで、ユーザーは変化の過程を目で追うことができ、何が起きたかを理解しやすくなる。
- 質感の表現: ボタンを押した時の沈み込みなどを適切に設定することで、物理的なボタンのような心地よいクリック感を演出できる。
💡 使いどころ
`hover` や `active` などの擬似クラスによるスタイルの変化を、瞬時の切り替わりではなくアニメーションさせたい時。クラスの付け外しによるシンプルな状態変化を表現したい時。
⚠️ 注意点・誤用
開始状態と終了状態の2点間の補間しかできないため、複雑な動き（ループや多段階の変化）には向かない（その場合はCSS Animationを使う）。`display: none` からの遷移は効かない（`opacity` や `visibility` を使う必要がある）。
具体例
- ボタンにマウスを乗せた時に、背景色がゆっくり変わる
- モーダルが出現する時に、フワッと表示される（Opacityの変更）
出典・参考文献:
- W3C. (2018). CSS Transitions Level 1. World Wide Web Consortium.
- Mozilla Developer Network. (2024). CSS transition. MDN Web Docs.
- Google. (2014). Material Design: Motion. Google Design Guidelines.
関連する解説記事
関連する記事詳細が見つかりませんでした。