Rectangle Fill (レクタングルフィル)

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

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

ホバーすると色付きの円が中心から広がって、または中心へ縮んで要素を塗りつぶします。

[適用する場所]にラジアルフィル(Radial Fill)のホバーエフェクトを追加してください。サークルエクスパンド(circle expand)とも呼ばれます。
新しい色の円が中心から滑らかに広がって要素を塗りつぶし、ポインターが離れると中心へ縮んで戻るようにし、その間ラベルの色も読みやすいように切り替えてください。
円は要素の形の内側に収まるよう切り抜き、ラベルは円の上に置いて、キーボードフォーカス時にも同じ効果を出してください。

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

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

色付きの背景が端からスイープして入り、弾むように少し行き過ぎてから戻ります。

[適用する場所]に背景バウンススイープ(Background Bounce Sweep)のホバーエフェクトを追加してください。
新しい背景色が片方の端からスイープして入り、反対側の端を弾むように少し行き過ぎてから落ち着くようにしてください。文字色は読みやすさを保つように切り替え、ポインターが離れたらなめらかにスライドして戻してください。
文字は塗りの上に表示し、キーボードフォーカスでも同じ効果を出してください。

ホバーすると要素が数度だけ回転します。

[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。

ホバーすると要素の角がなめらかに丸くなります。

[適用する場所]にラウンドコーナー(Round Corners)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素の角ばった角がなめらかに丸くなり、離れたら元の角に戻るようにしてください。やわらかく素早く。
要素のサイズは変えず、キーボードフォーカスでも同じ効果を出してください。

ホバーすると、斜めの光の帯が要素の端から端へ横切ります。

[適用する場所]にシャインスイープ(Shine Sweep)のホバーエフェクトを追加してください。sheen、シャイニーボタン(shiny button)、シャインオンホバー(shine on hover)、グリント(glint)、シマー(shimmer)、シマーボタン(shimmer button)とも呼ばれます。
ポインターが乗っている間、やわらかな斜めの光の帯が要素を左から右へ横切り、短い間を置いて繰り返すようにしてください。
光の帯は要素の内側で切り取り、ポインターが離れたら止め、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は再生しないでください。