モーション
4 本のカーブと短い時間の予算。シーンは見られたときに一度だけ再生し、結果で止まります。
カーブ
ページがここに届くと各カーブが一度再生されます。再生ボタンでもう一度動かせます。
- cubic-bezier(0.22, 1, 0.36, 1) · 600ms--ease-out入ってくるもの、動くものすべて。
- cubic-bezier(0.34, 1.4, 0.64, 1) · 450ms--ease-spring現れる小さなもの：チップ、吹き出し、バッジ。
- cubic-bezier(0.65, 0, 0.35, 1) · 600ms--ease-in-outすでに画面にあるものの形が変わるとき。
- cubic-bezier(0.32, 0.72, 0, 1) · 500ms--ease-drawerシートとドロワー。
時間
3 秒のシーンを基準にした縮尺で描いています。
- ホバーと押下150ms色の変化と 0.97 の押下スケール。
- ポップオーバー200–300msメニュー、ツールチップ、セグメントのつまみ。
- シーンの 1 手250–600msデモやタイルのシーンの各ステップ。
- シーン全体≤ 3s最初の動きから静止フレームまで。
再生
ヒーローカード、プロダクトのデモ、機能タイルはすべて同じルールで動きます。
- 1静止時のスタイルが最終フレーム。キーフレームはどこから来るかだけを書く。
- 2約 70% 見えたら少し待って一度だけ再生する。隣どうしは読む順に少しずらして始める。
- 3マウスのホバーかキーボードのフォーカスで、160ms のぼかしの下で再生し直す。終わっていない再生はやり直さない。
- 4ループは本当の待ち時間だけ。作業中のシマーなど。
- 5アニメーションするのは transform、opacity、filter だけ。退場は登場より速く。
- 6視差効果を減らす設定では最終フレームを表示し、再生ボタンを隠す。