Icon Float Away (アイコンフロートアウェイ)

ホバーするとアイコンが下に落ちて見えなくなり、上から戻ってきます。

[適用する場所]にアイコンドロップ(Icon Drop)のホバーエフェクトを追加してください。
要素内のアイコンが下に落ちて見えなくなり、上から元の位置に戻ってくるようにしてください。素早く、着地はやわらかく。
ループさせずポインターが入るたびに一度だけ再生し、ラベルとボタンのサイズは変えないでください。

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

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

コピーアイコンがチェックマークに変わり、ラベルが一瞬「コピーしました」になります。

[適用する場所]にクリップボードコピーフィードバック(Copy-to-Clipboard Feedback)のアニメーションを追加してください。コピー済み表示(copied state)、コピーアイコンからチェックマーク(copy icon to checkmark)とも呼ばれます。
コピーボタンを押すと、コピーアイコンが素早く縮んで消え、代わりにチェックマークが描かれてラベルが「コピーしました」に変わり、少ししたらすべてなめらかに元に戻るようにしてください。
切り替え中もボタンのサイズを変えずに何もずれないようにし、コピー済みの状態をスクリーンリーダーに伝えてください。

ボタンにホバーすると、中のアイコンがくるりと回転します。

[適用する場所]にアイコンスピン(Icon Spin)のホバーエフェクトを追加してください。
ポインターが入ると要素内のアイコンが滑らかに一回転し、離れると逆向きに回って戻るようにしてください。
回すのはアイコンだけでボタン全体は回さず、キーボードフォーカス時にも同じ効果を出してください。

ホバーすると矢印や要素そのものが数ピクセルだけ前後にずれます。

[適用する場所]にナッジフォワード/バックワード(Nudge Forward / Backward)のホバーエフェクトを追加してください。アローナッジ(arrow nudge)とも呼ばれます。
ポインターを乗せている間は矢印が指す方向へ少しスライドし、離れると戻るようにしてください。素早く小さく。
動かすのは矢印だけにしてラベルやレイアウトはずらさず、キーボードフォーカス時にも同じ効果を出してください。