Direction Aware Hover (ディレクションアウェアホバー)

ホバーすると、色付きの背景が片方の端から要素全体をなぞるように広がります。

[適用する場所]に背景スイープ(Background Sweep)のホバーエフェクトを追加してください。バックグラウンドフィル(background fill)、スライドフィル(slide fill)とも呼ばれます。
新しい背景色が左端から右端へ、弾まずになめらかに素早く広がり、ポインターが離れたら同じように引いていくようにしてください。文字色は読みやすさを保つように切り替えます。
塗りは要素の形の内側に収め、キーボードフォーカスでも同じ効果を出してください。

ホバーするとボタンのラベルが横へ抜け、矢印と塗りが広がって入ってきます。

[適用する場所]にインタラクティブホバーボタン(Interactive Hover Button)のエフェクトを追加してください。
ラベル横の小さな点が広がってボタン全体を塗りつぶし、その間にラベルは横へスライドしながらフェードアウトし、矢印付きのラベルが新しい塗りの上にスライドして入ってくるようにしてください。滑らかで素早く。
ボタンのサイズは固定し、ラベルが常に読めるようにして、キーボードフォーカス時にも同じ効果を出してください。

macOS の Dock のように、ポインターが近づくと並んだアイコンがなめらかに大きくなります。

[適用する場所]にドック拡大(Dock Magnification)のエフェクトを追加してください。ドック(dock)とも呼ばれます。
ポインターが近づくにつれて並んだアイコンがなめらかに大きくなり、いちばん近いアイコンが最大、その両隣も少し大きくなり、ポインターが離れたらすべて通常サイズに戻るようにしてください。
アイコンは固定のベースラインから上方向に大きくし、タッチやキーボードでは通常サイズのまま操作できるようにしてください。

ホバーすると、要素が浮かぶように数ピクセル上に移動します。

[適用する場所]にフロート(Float)のホバーエフェクトを追加してください。リフト(lift)、レイズ(raise)とも呼ばれます。
ポインターが乗っている間は要素が少し浮き上がったままになり、離れたら元に戻るようにしてください。なめらかでやさしく、弾みはつけません。
周りのレイアウトをずらさず見た目だけ動かし、キーボードフォーカスでも同じ効果を出してください。

ホバーしたカードだけがくっきり残り、ほかのカードはぼやけて暗くなります。

[適用する場所]にフォーカスカード(Focus Cards)のエフェクトを追加してください。ブラーシブリングオンホバー(blur siblings on hover)、ホバーフォーカスブラー(hover focus blur)、カードホバーエフェクト(card hover effect)とも呼ばれます。
ポインターがカードに乗っている間は、そのカードだけがくっきりしたまま、ほかのカードがぼやけて暗くなり少し縮むようにしてください。すべてなめらかにフェードし、ポインターが離れたら元に戻します。
キーボードフォーカスでも同じように強調し、何もホバーしていないときはすべてのカードをくっきり読みやすく保ってください。