このサンプルで見ること
- Input
- プロダクトLPのヒーローに、控えめなモーションと状態遷移の確認パネルを追加する。
- Design Focus
- ヒーロー、ボタン、生成状態の動きを小さく検証するサンプルです。目立つアニメーションではなく、状態変化が伝わる動きだけを残します。
- Handoff
- Motion notes, easing map, reduced-motion pass
Open Design sample 03
動きの意図を、コード化する前に共有する。
ヒーロー、ボタン、生成状態の動きを小さく検証するサンプルです。目立つアニメーションではなく、状態変化が伝わる動きだけを残します。
CSS motion状態遷移reduced motion
motion.sample.html
measured / tactile / fast
Motion Board
モーション確認ボード
生成から確認まで
Intent
何を動かすかではなく、何を伝えるかを決める
Timing
速度と余韻を短い単位で確認
Fallback
動きを減らした環境でも情報を保つ