クラスター C4: CSS とデザイン
CSS アニメーションとトランジション完全ガイド
動きは状態変化を明確にするために使うべきで、装飾のために増やすべきではありません。遷移、キーフレーム、easing を体系化すると UI が安定します。
トランジションとキーフレームを使い分ける
トランジションは hover、focus、開閉のような A から B の状態変化に向いています。小さく、予測可能で、再利用もしやすいからです。
キーフレームはローダーやガイド動線に向いていますが、繰り返し動作は控えめにし、reduced-motion への配慮を忘れてはいけません。
チームで揃えるべきルール
- 基本は `transform` と `opacity` を中心に動かす。
- easing は入場・退出・強調など少数のトークンに絞る。
- duration と easing を設計トークン化して、場当たり的な値を増やさない。
実用的な入出力例
入力
コンポーネント: トグルスイッチ 目的: 素早く分かりやすい状態フィードバック
出力
transform 180ms cubic-bezier(.2,.8,.2,1) color 140ms ease-out