hover-interactions

ホバーインタラクションのアニメーション

ディズニーの12の原則をマウスのホバー状態に適用します。

原則の適用

スクワッシュ＆ストレッチ：ホバー時にカードをわずかに拡大（1.02～1.05）し、「浮き上がる」効果を生み出します。

予備動作：ホバーはクリックへの予備動作です。ホバー状態で操作を予告します。

演出：ホバー効果では、インタラクティブな要素を強調し、注意をそらさないようにします。

ストレート・アヘッドとポーズ・トゥ・ポーズ：通常時とホバー時の状態を正確に定義します。その間をスムーズに遷移させます。

後追いとオーバーラップ：子要素は親要素の後にアニメーションします。カードが浮き上がった後、影が広がります。

スローイン・スローアウト：ホバー開始時はイーズアウト（すばやく反応）。ホバー終了時はイーズイン・アウト（自然に戻る）にします。

アーク：下線は中央から外側に向かって描画できます。ハイライトは曲線に沿って流れるように表示します。

二次動作：複数のさりげない効果を組み合わせます。拡大、影、色の変化を同時に加えます。

タイミング：

• ホバー開始時の反応：150～200ms（すばやく反応すると感じられる必要があります）
• ホバー終了時：200～300ms（少しゆっくりでもかまいません）
• ホバー開始時に300msを超えないようにします

誇張：控えめにします。ホバーは操作の予告であり、見せ場ではありません。拡大率は最大1.05、影の増加は最大+8pxにします。

立体感のある描画：ホバー状態は別の要素に置き換わったようではなく、同じ要素が持ち上がったように感じられる必要があります。

魅力：ホバーによってクリックを促します。操作を強制せず、期待感を生み出します。

推奨タイミング

ホバー効果	ホバー開始	ホバー終了	イージング
色の変化	150ms	200ms	ease-out / ease-in-out
拡大／浮き上がり	200ms	250ms	ease-out / ease-in-out
影	200ms	250ms	ease-out / ease-in-out
下線の描画	200ms	200ms	ease-out
画像のズーム	300ms	400ms	ease-out
アイコンの移動	150ms	200ms	ease-out

実装パターン

/* Card lift with shadow */
.card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Slower return */
.card:not(:hover) {
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

/* Underline draw from center */
.link {
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 200ms ease-out, left 200ms ease-out;
}

.link:hover::after {
  width: 100%;
  left: 0;
}

アイコンのアニメーションパターン

.button-icon {
  transition: transform 150ms ease-out;
}

.button:hover .button-icon {
  transform: translateX(4px);
}

/* Arrow grows */
.arrow-icon {
  transition: transform 150ms ease-out;
}

.link:hover .arrow-icon {
  transform: translateX(4px) scale(1.1);
}

主なルール

1. タッチデバイスにはホバーがないため、ホバーなしでも機能することを確認します
2. すばやく反応すると感じられるよう、ホバー開始時の時間は200ms未満にします
3. 誤クリックの原因になるほど要素を動かさないようにします
4. @media (hover: hover) を使い、ポインターデバイスに適用範囲を限定してテストします
5. 強くなりすぎないよう、組み合わせるプロパティは最大3つにします

@media (hover: hover) {
  .card:hover { /* hover effects */ }
}