スキル自身の言葉で
監査ではなく構築のスキルです。モーションの依頼を、厳格なレビューに耐える実装へと変えます。固定された順序で進めます — そもそもアニメーションすべきか、目的、ツール、プロパティ、カーブと時間、中断、終了 — そのうえでコードを書きます。
選択肢のメニューではなく、判断を求めているデザイナーとデベロッパーのためのものです。具体は厳密な表から導きます。頻度の階層、transform と opacity のみ、名前付きの cubic-bezier カーブ、要素ごとの時間の範囲、そしてアニメーションと一緒に提供される reduced-motion と hover のゲーティングです。コードベースの監査や差分の批評には、姉妹スキルを使用してください。
仕組み
- 01まず頻度でゲートする
最初のステップは、コードが一行も存在しないうちに作業を終わらせることがあります。1 日に 100 回以上開かれるもの、またはキーボードショートカットから呼び出されるものには、アニメーションを一切付けません。
- 02目的を一言で名付ける
目的がなければアニメーションもありません。かっこいいからという理由で、ユーザーが常に目にする要素に求めるのは、作る理由ではなく止める理由です。
- 03機能する最も安価なツールを選ぶ
ツール表を上から順にたどり、最初に適合したところで止めます。CSS transition、@starting-style、CSS animation、WAAPI、Motion。
- 04プロパティを制限する
transform と opacity が主役です。レイアウトとペイントをスキップし、GPU で実行されるからです。clip-path が公認された 4 つ目で、height のアニメーションはアコーディオンに限り許容されます。
- 05カーブと時間を表から確定する
出入りは ease-out、画面上の移動は ease-in-out、hover と色の変化は ease、一定の動きは linear、既定は ease-out です。
- 06中断と終了を設計する
頻繁に再トリガーされるものは transition、ジェスチャーはスプリングを使い、終了は開始を鏡写しにするので、スワイプで閉じる動作が明白に伝わります。