こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ボタンやリンクなどにマウスを重ねたとき、ほんの少し遊び心のある動きを加えるとユーザーの印象に残りやすくなります。
特に「ぷるぷる震えるアニメーション」は、注目させたい要素に使うと効果的です。
今回は CSSのみで簡単に実装できる「ぷるぷる震える」ホバーアニメーション をご紹介します。
コピペで使えるコード付きなので、ぜひ自分のサイトでも試してみてください。
ぷるぷるアニメーションの仕組み
「ぷるぷる震える」アニメーションは、CSSの @keyframes を使って要素を左右に小刻みに揺らすことで表現します。
マウスをホバーしたときだけ発動するようにすれば、シンプルで使いやすい演出になります。
- CSSで @keyframes を定義する
- ホバー時にアニメーションを発火させる
- 数値を調整して「小刻み」や「大きめ」など揺れ方をカスタマイズ
実装コード（コピペOK）
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードをそのまま使えば、マウスを当てた瞬間にボタンがぷるぷる震え出します。
応用アイデア
- 揺れ幅（translateXの数値）を大きくすると「激しく震える」印象になる
- アニメーション速度を 0.6s に変えると「ゆるやかに震える」演出になる
- ボタンだけでなく、アイコンや画像に適用することで遊び心を演出できる
ポイント
使いすぎるとユーザーが疲れてしまうため、強調したい部分に限定して使うのが効果的です。
まとめ
「ぷるぷる震える」アニメーションは、注目させたいボタンやリンクに遊び心を加えるのに最適です。
CSSだけで簡単に実装できるので、ぜひ自分のサイトに取り入れてみてください。
satokotadesignキャンペーン実施中！
