Rotate (ローテート)

ホバーすると要素が横方向に斜めにゆがみます。

[適用する場所]にスキュー(Skew)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が横方向にゆがんで少し斜めになり、離れたらまっすぐに戻るようにしてください。素早くなめらかに。
斜めの状態でも文字が読めるようにし、周りのレイアウトがずれないようにして、キーボードフォーカスでも同じ効果を出してください。

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

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

要素が不安定な物のように、傾きながら左右に揺れます。

[適用する場所]にウォブル(Wobble)のアテンション効果を追加してください。
要素が傾きながら左右に揺れ、最初は大きく、揺れるたびに小さくなって止まるようにしてください。
トリガーされたら一度だけ再生し、隣のコンテンツがずれないようにしてください。

要素が上端を支点に振り子のように左右に揺れ、揺れ幅がだんだん小さくなります。

[適用する場所]にスイング(Swing)のアテンション効果を追加してください。
要素が吊り下げ看板のように左右に揺れ、最初は大きく揺れてすぐに収まるようにしてください。
中心ではなく上端を支点にして揺らし、トリガーされたら一度だけ再生してください。

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

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

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

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

ポインターが乗っている間、要素がなめらかに少し縮小します。

[適用する場所]にシュリンク(Shrink)のホバーエフェクトを追加してください。スケールダウン(scale down)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し縮小し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。