アニメーションのタイミングとUX知覚

1）タイミングが重要な理由

• システムへの即時の応答そして信頼の感覚；
• 原因と効果の明確さ（要素が移動した/から）。
• 長いセッションでの疲労と快適さ。
• 行動の正確さ（特にモバイルおよび高レートで）。

ルール：タイミングは目的に役立ちます。アニメーションが「何が起こったのか」を理解するのに役立たなければ、それは妨げになります。

2）心理物理学としきい値

• ≤ 50 ms-エコー入力（印刷、クリックエフェクト）。瞬く間に見えます。
• ≤ 100 ms-アクションによる最初の視覚的フィードバック（「押された」ボタン）。
• 120-180ミリ秒-ホバー/フォーカス、ソフトステート遷移。
• 180-280ミリ秒-モーダル/パネル；「自然な」外観として認識されます。
• 300-500 ms-共有要素、ステップ前進。
💡 700ミリ秒-「遅さ」のリスク。それが理にかなっている場合にのみ残す（例えば、勝利の確認）。
• ≈ 1200-1600ミリ秒-スケルトン/輝きサイクル。長い-疲れる。

3）緩和および重量のカーブ

• 標準：'cubic-bezier （0。2, 0, 0.2、1）'-ニュートラルな「材料」ダイナミクス。
• 押された：'cubic-bezier （0。4、0、1、1）'-クイックログイン、ショートクリック。
• オーバーレイアウト：'cubic-bezier （0、0、0。2、1）'-柔らかい出力。
• 下線付きアクセント（まれ）：'cubic-bezier （0。2, 0.8, 0.2, 1.2）'オーバーシュート≤ 8 px。

重量光学：より大きい部品（カード、引出し）、より長い持続期間（基盤への+40-80ミリ秒）。

4）フェーズと振付

1.開始（10-40ms）：軽いフェード/スケール0。98→1-開始信号。

2.輸送（主要な段階）：移動/開始。

3.ドラフト（20-60ミリ秒）：小さなブレーキ、影/フォーカスリングの安定化。

• リスト：20-40ミリ秒/アイテム、行の最大6-8アイテム。
• 形態：カスケード無し；入力を妨げないように、すべてが同時に表示されます。

リバーシビリティ：「バック」ミラー「転送」15-30％高速。

5）相互作用のタイプによるタイミング

6）時間の知覚： 実際の加速なしで「加速」する方法

インスタントアフォーダンス：カーソル/プレススタイルの即時変更≤、ネットワークの前でも100ミリ秒です。
複雑さの隠蔽：並行ダウンロード；パネルを開く前にバックグラウンドデータのプルアップ。
感覚アンカー：運動の共有要素と方向は、待機の認知コストを削減します。
楽観的なアップデート：UIはすぐに「準備ができている」、サーバーが確認またはロールバックします。

7）疲労とアニメーション衛生

無限の脈動を避けて下さい；任意のサイクルは断続的または切断可能でなければなりません。
各ノードのボケ/ボックスシャドウなしで要素の配列（テーブル、グリッド）にマイクロ効果を行います。
'prefers-reduced-motion： reduce'をサポート：100msまたはスタティックステータスイッチ≤のみフェードします。

css
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration:.01ms! important; }
}

8）タイミングトークン（設計システム）

json
{
"motion": {
"duration": { "press": 90, "hover": 160, "focus": 160, "overlayIn": 240, "overlayOut": 180, "tab": 200, "shared": 280 },
"easing": {
"standard": "cubic-bezier(0. 2,0,0. 2,1)",
"accelerate": "cubic-bezier(0. 4,0,1,1)",
"decelerate": "cubic-bezier(0,0,0. 2,1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

名前：'motion。duration。 {role}''motion。easing。 {role}'-コンポーネントとFigmaはエンジンで同じです。

9）実装： CSSとフレーマーモーション

css
:root{
--dur-press:90ms; --dur-hover:160ms; --dur-overlay-in:240ms; --dur-overlay-out:180ms;
--ease-std:cubic-bezier(.2,0,.2,1);
--ease-acc:cubic-bezier(.4,0,1,1);
--ease-dec:cubic-bezier(0,0,.2,1);
}
.button{ transition: transform var(--dur-press) var(--ease-acc), box-shadow var(--dur-hover) var(--ease-std); }
.button:active{ transform: scale(.98); }
.modal-enter{ animation: modalIn var(--dur-overlay-in) var(--ease-std) both; }
.modal-exit { animation: modalOut var(--dur-overlay-out) var(--ease-dec) both; }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
@keyframes modalOut{ from{opacity:1} to{opacity:0; transform:translateY(8px) scale(.99)} }

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{opacity:0}} animate={{opacity:1}} exit={{opacity:0}}
transition={{duration:.18, ease:[0. 2,0,0. 2,1]}} className="fixed inset-0 bg-black/50">
<motion. div initial={{y:16, scale:.98, opacity:0}}
animate={{y:0, scale:1, opacity:1, transition:{duration:.24, ease:[0. 2,0,0. 2,1]}}}
exit={{y:8, scale:.99, opacity:0, transition:{duration:.18, ease:[0,0,0. 2,1]}}}
className="m-auto max-w-lg rounded-2xl bg-white p-6">
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

10）時間の構成： 平行対シーケンス

平行（フェード+同時に翻訳）-より速いフィール。
シーケンス（最初にコンテナ、次にコンテンツ）はより明確な構造ですが、より長いです。階層を表示することが重要な場合に適用します。
同じブロック内の密接に関連する要素間のステップ>60ミリ秒を避けます。

11）タイミングと内容

テキスト：製品内の文字/単語ごとにアニメーション化しないでください。マーケティング手法です。
数字/カウンタ：ステップ40-60 ms batchami、ジッターレイアウトなし（表形式）。
グラフィック：開始シリーズ180-240ミリ秒、ホバーハイライト≤ 120ミリ秒。

12）アクセシビリティと知覚誤差

フォーカススタイルは遅滞なく表示される必要があります。
警告/エラー-最小限のアニメーション（≤ 120ミリ秒）、ユーザーがAT（補助技術）を使用している場合は揺れません。
点滅>3/sおよび大きい対照の明滅を避けて下さい。

13） iGamingの詳細

• プレス≤ 100ミリ秒；ステータス'busy' immediately；最終的なトースト/インジケータ-遅延なし。
• UI応答のタイミングは確認アニメーションよりも重要です：確認は短い120-160ミリ秒です。

• 開始≤ 200ミリ秒、300-500ミリ秒をブレーキをかける均一な周期；無限の明滅はない。
• Winバースト≤ 500ミリ秒、ストロボなし。金額テキストはAAAです。

• バッチによる更新（250-1000ミリ秒）；視覚差分≤ 160ミリ秒；レイアウトなしでジャンプします。
• ホバー/フォーカス-「点滅」しないように80-120ミリ秒のバックライトをデバンクします。

14）アンチパターン

動きのための線形カーブ（感じ「機械」）。
簡単なボタンの状態のための持続時間>400ミリ秒。
数十の要素（牽引）のリストによるとカスケード100+ミリ秒。
アニメーション内の何百もの要素の影/ぼかし。
矛盾：同じ製品内で異なるタイミングで同じアクションを実行します。
キーボードアクティベーションの焦点または遅延。

15） QAのタイミングチェックリスト

コンシステンシー

• タイミングとカーブはトークンから取られます。同じアクションでも同じです。

レスポンス

• 80-180ミリ秒のスケールに合う/ホバー/フォーカスを押します。
• 最初の視覚応答≤ 100msです。

コレオグラフィー

• 入力と出力は対称です。出力は入力より15-30％速いです。
• カスケードは8要素と40msステップを超えません。

A11y

• 'prefers-reduced-motion'サポート；遅延のない焦点。
• 点滅しない>3/s。

パフォーマンス

• 'transform/opacity'のみがアニメーション化されます。大量のぼかし/影はありません。

16）設計システムにおけるドキュメンテーション

「モーショントークン」：デュレーション/イージング/スタガー+アプリケーションマップ（ボタン、オーバーレイ、タブ、リスト）。
「リズム&フェーシング」：カスケードとリバーシビリティスキーム。
「動きを減らして下さい」：低下の規則および例。
「Do/Don 't」：タイムコードとターゲットメトリック（INP/First Feedback）を含む短いクリップ。

概要

良いタイミングは即座に反応し、わかりやすい振付と経済的な曲線です。マイクロ状態の短い期間を保ち、意味を追加した場所だけをストレッチし、動きを減らし、「高価な」プロパティをアニメーション化しないでください。その後、インターフェースは活発で信頼性が高く、特にリアルタイムおよびハイステークのシナリオでは感じられます。