Border Fade (ボーダーフェード)

ホバーすると、背景色と文字色が新しい色へクロスフェードします。

[適用する場所]に背景フェード(Background Fade)のホバーエフェクトを追加してください。カラーフェード(color fade)とも呼ばれます。
ポインターが要素に乗っている間は背景色と文字色が新しい色へなめらかにクロスフェードし、離れたら元に戻るようにしてください。落ち着いた印象で、動きはつけません。
どちらの状態でも文字と背景のコントラストを十分に保ち、キーボードフォーカスでも同じ効果を出してください。

ホバーすると、要素の縁の内側に内枠の線が現れます。

[適用する場所]にトリム(Trim)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の縁のすぐ内側に細い線がフェードインし、離れたらフェードアウトするようにしてください。控えめに、動きはなしで。
線は要素の内側に収めてサイズが変わらないようにし、キーボードフォーカスでも同じ効果を出してください。

ホバーするとアウトラインが要素から外へ広がったり、要素に向かって縮んだりします。

[適用する場所]にアウトラインエクスパンド(Outline Expand)のホバーエフェクトを追加してください。
アウトラインが要素の縁にぴったり沿った状態から外側へ広がって周りに小さなすき間を作り、ホバー中はそのまま保ち、ポインターが離れたら閉じて戻るようにしてください。滑らかで素早く。
アウトラインは要素のサイズを変えず周りのコンテンツも押し出さない方法で描き、キーボードフォーカス時にも同じ効果を出してください。

ホバーすると塗りつぶしの背景が消え、枠線だけのボタンになります。

[適用する場所]にホロウ(Hollow)のホバーエフェクトを追加してください。ゴーストフィル(ghost fill)とも呼ばれます。
塗りつぶしの背景がフェードアウトして枠線だけが残り、空になった背景でも読めるようにラベルの色が変わるようにしてください。滑らかで素早く。
要素のサイズが変わらないよう両方の状態で枠線の太さを同じにし、キーボードフォーカス時にも同じ効果を出してください。

ホバーすると、同心円状の枠線のリングが要素から外側へ広がったり、内側へ縮んだりします。

[適用する場所]にボーダーリップル(Border Ripple)のホバーエフェクトを追加してください。
ポインターが入ったら、枠線のリングがいくつか順番に要素から外側へ広がって消えていくようにしてください。波紋のように素早く軽やかに。
ループさせずホバーごとに一度だけ再生し、リングで周りのレイアウトがずれないようにしてください。

ホバーの開始時や終了時に、要素が弾むように少し行き過ぎながら拡大・縮小します。

[適用する場所]にバウンススケール(Bounce Scale)のホバーエフェクトを追加してください。バウンスイン/アウト(bounce in / out)とも呼ばれます。
要素が弾むように少し大きくなり、最終サイズを一瞬はっきり行き過ぎてから落ち着き、ポインターが離れたら同じように弾んで戻るようにしてください。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。

グリッド内でハイライト背景がカードの間をすべるように移動し、ホバーされているカードについていきます。

[適用する場所]にカードホバーエフェクト(Card Hover Effect)を追加してください。スライディングハイライトカードグリッド(sliding highlight card grid)とも呼ばれます。
ホバーしたカードの背後にやわらかいハイライト背景が現れ、ポインターが次のカードへ移るとそこまでなめらかにすべって移動し、グリッドから離れたらフェードアウトするようにしてください。
キーボードフォーカスでも同じようにハイライトを動かし、カード自体は動かないようにしてください。