ホバーでワクワク揺れるアイコン
アイコンボタンにマウスを乗せると 左右に小刻みに揺れる 、注意を引くためのアニメーションです。仕組みは CSS だけで完結していて、 @keyframes wiggle で rotate(-15deg) から rotate(12deg) へと角度を振り、最後にゼロへ戻すことでベルが鳴るような往復運動を作っています。
解説
アイコンボタンにマウスを乗せると左右に小刻みに揺れる、注意を引くためのアニメーションです。仕組みは CSS だけで完結していて、@keyframes wiggle で rotate(-15deg) から rotate(12deg) へと角度を振り、最後にゼロへ戻すことでベルが鳴るような往復運動を作っています。:hover のたびに animation:wiggle .5s が一度だけ再生され、無限ループではないので過剰になりません。
向いている用途
- 通知ベルや「お知らせ」アイコン
- 「ここをクリック」と気づかせたいボタン
- プロフィールアバターの遊び心ある反応
揺れ幅は rotate の角度を小さくすると上品に、大きくすると元気な印象になります。速さは .5s の数値で調整します。SVG アイコンに aria-hidden を付けているので、ボタン自体には意味の通る aria-label やテキストを添えてください。揺れる動きが苦手な人もいるため、prefers-reduced-motion 指定時はアニメーションを止める配慮があると安心です。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
ホバーするたびに何度も揺れますか
はい。:hover でアニメーションが一度ずつ再生される設計です。無限ループではないため、マウスを乗せ続けても揺れっぱなしにはならず、いったん静止します。再度乗せ直すとまた揺れます。
揺れ方を控えめにできますか
できます。@keyframes 内の rotate 角度（-15deg や 12deg）を 5〜8deg 程度に下げると上品になります。再生時間 .5s を長くするとよりゆったりした動きになります。