small-200-300ms

短いトランジション（200～300ms）

200～300msでは、ユーザーは動きを意識的に認識します。この時間はマイクロインタラクションと本格的なアニメーションの橋渡しとなり、UI の状態変化に最適です。

短い時間でのディズニーの原則

効果的なもの

スクワッシュ＆ストレッチ：目に見えるものの控えめにします。遊び心のあるインターフェースでは10～15％、プロフェッショナルなインターフェースでは5％にします。

予備動作：短い予備動作が効果的です。40～60msの準備を加えると、200msのメイン動作が引き立ちます。

演出：明確な階層を設けます。主要な要素が先行し、二次的な要素は50～100ms遅れて続きます。

ストレートアヘッド／ポーズ・トゥ・ポーズ：ポーズ・トゥ・ポーズが適しています。キーフレームによって洗練された動きを作れます。

後続動作：目に見えるオーバーシュートを加えます。目標を5～10％超えて動かすと、生き生きとした印象になります。

スローイン／スローアウト：イージングカーブを全体に適用します。イーズイン・アウトもカスタムのベジェ曲線も効果的です。

弧を描く動き：自然な曲線を加えると効果が高まります。要素は直線ではなく、弧を描いて移動できます。

二次動作：二次動作は1つか2つにします。フェード＋スケール、移動＋回転などです。

タイミング：60fpsで12～18フレームです。滑らかで、意図が伝わる動きになります。

誇張：中程度から顕著な程度にします。ブランドの個性に応じて調整します。

立体感のある描画：複数の変形を組み合わせます。移動、スケール、回転を同時に適用します。

魅力：ブランドの個性を育む、意図的なアニメーションを使います。

効果的でないもの

• 即座に感じられること（遅すぎる）
• 複雑なキャラクターアニメーション
• 長い移動距離
• 複数の連続した段階

イージングの推奨事項

/* Standard smooth transition */
transition: all 250ms ease-out;

/* Modal/card appearance - confident arrival */
transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);

/* Bouncy personality */
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Professional, subtle */
transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);

最適な使用例

• モーダルダイアログの表示
• カードの展開／折りたたみ
• ナビゲーションドロワーのスライド
• タブコンテンツのトランジション
• フィルターパネルの切り替え
• 画像サムネイルの拡大
• アラート／通知のスライド

実装パターン

.modal {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 200ms ease-out,
              transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card-expand {
  transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

重要なポイント

短いトランジションは目で捉えられ、理解されます。ユーザーは動きを追い、脳は空間的な関係を処理します。これを活用して、注意を導き、階層を伝えます。