ホバーで震えるテキスト

解説

カーソルを乗せている間だけ、文字が小刻みにブルブル震えるテキストです。CSSのみで実装しており、:hover のときに @keyframes のアニメーションを infinite で回し、transform: translate() で上下左右へわずかに位置をずらして揺らしています。離せば即座に止まる軽い演出で、JavaScriptは使いません。震えの幅を数pxに抑えているため、うるさくなりすぎず親しみのある反応になります。

こんなときに

• 入力エラーや注意喚起など「ちょっと待って」を伝えたい箇所
• ボタンやリンクに遊び心のあるリアクションを足したいとき
• キャラクター性のあるサイトのインタラクティブな文言

揺れの強さは translate の数値、速さは animation の秒数で調整できます。震えを大きくしすぎると不快に感じられることがあるため控えめが無難です。常時揺らすのではなくホバー時だけ動くので負荷は軽めです。タッチ端末ではホバーが効かないため、タップ時に短く震わせたい場合はクラスの付け外しで代替するとよいでしょう。揺れが苦手な利用者に配慮し prefers-reduced-motion での停止も検討してください。

使用例・適したシーン

• ヒーローのキャッチコピー
• 見出しの強調
• コーポレートのキービジュアル