instant-0-100ms

即時アニメーション（0～100ms）

100ms 未満のアニメーションは、ユーザーには瞬時に感じられます。この時間は、遅延を感じさせずに操作を確認する即時フィードバックに適しています。

ディズニーの原則を瞬時の速度で適用する

効果的なもの

つぶしと伸ばし：控えめにします。ボタンを押したときに 2～5% 圧縮すると、目に見える変形を起こさず、触覚的な感触を生み出せます。

予備動作：完全に省略します。この速度では準備の時間がありません。

演出：最小限にします。動きではなく、位置や色の変化を利用します。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：ストレート・アヘッドのみを使います。キーフレームを複雑にするには速すぎます。

後追い：使いません。後追いが認識される前に動きが完了します。

スローイン／スローアウト：ease-out のみを使います。最高速度で始まり、わずかに減速します。

弧を描く動き：直線的な軌道のみを使います。この速度では曲線は認識されません。

二次動作：省略します。脳は複数の瞬時の変化を同時に処理できません。

タイミング：最大 1～3 フレームです。60fps では 1 フレームあたり 16.67ms です。

誇張：最小限にします。控えめな拡大縮小（0.95～1.05）や不透明度の変化を使います。

立体感のある描画：空間的な変形ではなく、色や不透明度の変化に注目します。

魅力：明瞭で即時の応答が、信頼感とパフォーマンスの印象を高めます。

効果がないもの

• 複雑な複数ステップのシーケンス
• 目に見える移動距離
• 15 度を超える回転
• 複数のプロパティの変更
• 段階的な表示

イージングの推奨

/* Primary choice - immediate start, soft landing */
transition: all 50ms ease-out;

/* Alternative - completely linear for state toggles */
transition: opacity 80ms linear;

/* Button press feedback */
transition: transform 50ms ease-out;

最適な用途

• ボタンのアクティブ状態／押下状態
• トグルスイッチ
• チェックボックス／ラジオボタンの選択
• フォーカスリングの表示
• ホバー時の色の変化
• タッチリップルの開始

実装パターン

.button:active {
  transform: scale(0.97);
  transition: transform 50ms ease-out;
}

.toggle-on {
  background: var(--active);
  transition: background 80ms ease-out;
}

主なポイント

瞬時の速度では、アニメーションは伝達ではなく確認の役割を果たします。ユーザーがアニメーションを意識して認識するのではなく、インターフェースが応答していると感じられるようにします。