Background Bounce Sweep (背景バウンススイープ)

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

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

ホバーすると要素の内側で矩形が広がったり縮んだりして、背景が切り替わります。

[適用する場所]にレクタングルフィル(Rectangle Fill)のホバーエフェクトを追加してください。
内側の矩形が中心へ縮むにつれて新しい背景色が四辺から閉じるように広がり、ポインターが離れると再び開いて戻るようにし、その間ラベルの色も読みやすいように切り替えてください。滑らかで素早く。
ラベルは塗りの上に置き、キーボードフォーカス時にも同じ効果を出してください。

ホバーすると、背景が中央または端からシャッターのように開いたり閉じたりします。

[適用する場所]にシャッターフィル(Shutter Fill)のホバーエフェクトを追加してください。シャッター(shutter)とも呼ばれます。
新しい背景色が中央の縦線から両側へシャッターのように開き、ポインターが離れたら中央へ閉じるようにし、その間ラベルの色も読みやすい色に切り替えてください。なめらかに素早く。
塗りは要素の内側で切り取ってラベルをその上に置き、キーボードフォーカスでも同じ効果を出してください。

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

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

ホバー中、要素が浮き上がったあと上下にゆらゆらと揺れ続けます。

[適用する場所]にボブ(Bob)のホバーエフェクトを追加してください。ハング(hang)とも呼ばれます。
要素が少し浮き上がり、ポインターが乗っている間は上下にやさしく揺れ続け、離れたら元の位置に戻るようにしてください。ゆっくり、やわらかく。
揺れのループはホバー中だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。