ボタンホバートランジションイージング

ボタンホバーイージング

ボタンホバーエフェクトはあらゆるWebサイトで最も頻繁なアニメーションの1つです。高速（200ms未満）で応答性がある必要があります。

推奨カーブ

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

これはCSSのeaseキーワードです。素早い加速、緩やかな減速。ホバーエフェクトには、この非対称性が即座の視覚的フィードバック（速い開始）とスムーズな終了（遅い終了）を提供するため理想的です。

持続時間ガイドライン

プロパティ	持続時間	理由
背景色	100〜150ms	色の変化は即座に知覚される
ボックスシャドウ/エレベーション	150〜200ms	影の変化はやや長い持続時間が有効
Transform (scale/translate)	150〜200ms	動きは知覚に十分な時間が必要
ボーダー色	100〜150ms	微妙な変化、高速レスポンス

コード例

.btn {
  background: hsl(220, 90%, 56%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transform: translateY(0);
  transition:
    background 150ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}
.btn:hover {
  background: hsl(220, 90%, 48%);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition-duration: 50ms;
}

Activeステートのテクニック

:activeステートはより短い持続時間（50ms）を使用しています。ユーザーがクリックすると、ボタンはほぼ即座に押された状態に戻り、触覚的な感触を与えます。遅いホバー、速いクリック — この非対称性が満足感のあるインタラクションを作ります。