Animate

/impeccable animate

Good fit

• インターフェースが生命感がない、またはステート間の移行が唐突。
• ローディング、フィードバック、遷移に、何が起きているかを説明するモーションが必要。
• reduced-motionフォールバックを備えた規律あるアニメーションが欲しい。

いつ使うか

/impeccable animate はインターフェースが生命感がない、ステート変更が瞬時で衝撃的、ローディングが突然現れる、ユーザーがクリックが登録されたことを確信できない場合に使います。起きていることを伝える小さな動きを追加するために使ってください：登場、退場、フィードバック、ステート間の遷移。

エネルギーのためにバウンスや弾性スプリングを追加するためには使わないでください。それは装飾であり、このスキルはそれを提供しません。

仕組み

スキルはモーションの恩恵を受ける静的な瞬間を特定し、厳格な規律で適用します。

1. 登場と退場：要素は200〜300msのフェードに微妙なYまたはスケールを加えて現れたり消えたりする。レイアウトプロパティは使わない。
2. ステートフィードバック：hover、active、focus、loading、successはすべて突然の切り替えではなくモーションで伝達。
3. ビュー間の遷移：意味のある場所では共有要素遷移、それ以外はフェードスルー。
4. 進捗とローディング：スケルトンスクリーン、確定バー、「まだ処理中」を伝えるモーション。
5. モーションの軽減：すべてのアニメーションに prefers-reduced-motion フォールバック。

イージングは常に指数関数的（ease-out-quart、quint、またはexpo）です。実世界の物体は滑らかに減速するからです。バウンスなし、弾性なし、プログレスインジケーター以外でのリニアなし。

スキルは transform と opacity のみをアニメーションします。width、height、top、left をアニメーションしているなら、それは間違っています。高さの遷移には grid-template-rows を使ってください。

試してみる

/impeccable animate the sign-up flow

典型的な追加：

• メール入力にfocus-visibleでのフォーカスグロー（opacity + shadow、180ms）
• 送信ボタンはloading状態で内部にスピナーを表示、横に別のスピナーではなく
• 成功画面はopacity + translateY(8px)、260ms、ease-out-quartで登場
• エラーメッセージはgrid-template-rows（heightではなく）で220msでスライドダウン
• すべての遷移に @media (prefers-reduced-motion: reduce) フォールバック

注意点

• 「もっとアニメーションを」と求めること。 Animateはダイヤルではありません。モーションが伝達する場所に追加し、あらゆる場所には追加しません。
• reduced-motionフォールバックを削除すること。 スキルは自動的に追加します。アクセシビリティ上、交渉の余地はありません。

Related commands

• Delight