micro-100-200ms

マイクロアニメーション（100〜200ms）

100〜200msは、マイクロインタラクションに最適な範囲です。反応がよいと感じられるほど速く、意図的な動きとして認識できるほどゆっくりしています。

マイクロスピードで活用するディズニーの原則

効果的なもの

スクワッシュ＆ストレッチ：控えめに適用します。ボタンの弾む動きや要素の表示には、5〜10％が効果的です。

予備動作：マイクロな予備動作も可能です。150msの動作の前に、20〜30msの溜めを入れます。

演出：焦点は1つに絞ります。動かす要素は1つだけにして、ほかは静止させます。

ストレート・アヘッド／ポーズ・トゥ・ポーズ：どちらも効果的です。ストレート・アヘッドで進められるほどシンプルで、ポーズを制御できるほど短い動きです。

後続動作：オーバーシュートは最小限にします。目標を2〜5％だけ超えたら、すぐに落ち着かせます。

スローイン／スローアウト：ease-outを中心に使います。要素は確かな動きで到着するようにします。

アーク：わずかな曲線を付けることもできます。ドロップダウンの項目は、真下にまっすぐ動かすのではなく、控えめな弧を描いてもよいでしょう。

副次動作：副次動作は最大1つにします。たとえば、メニューが開く間にアイコンを回転させます。

タイミング：60fpsで6〜12フレームです。滑らかな動きに十分な長さです。

誇張：適度にします。スケールは0.9〜1.1、回転は最大30度までです。

立体感のある描画：シンプルな変形を使います。スケール、不透明度、短い移動などです。

魅力：素早いアニメーションは、モダンで洗練された印象を与えます。

効果的でないもの

• 移動距離が長い
• 複雑な振り付け
• 負荷の高い物理シミュレーション
• 複数段階にわたる表示
• 手の込んだ予備動作のシーケンス

イージングの推奨

/* Standard micro-interaction */
transition: all 150ms ease-out;

/* Appearing elements - start fast, land soft */
transition: opacity 120ms ease-out, transform 150ms ease-out;

/* Bouncy micro-feedback */
transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);

最適な使用例

• ツールチップの表示
• ドロップダウンメニューを開く動作
• アイコンの状態変化
• 小さなホバーアニメーション
• 通知バッジ
• タブの切り替え
• アコーディオンのヘッダー

実装パターン

.tooltip {
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition: opacity 120ms ease-out,
              transform 150ms ease-out;
}

.trigger:hover .tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  opacity: 0;
  transform: translateY(-8px);
  transition: all 150ms ease-out;
}

重要なポイント

マイクロアニメーションは、見られるというより感じ取られるものです。ユーザーは、アニメーションがないと気づきますが、意識して観察することはありません。洗練された印象は、こうした細部から生まれます。