目次
注目を集めたいボタンや、遊び心を加えたい場面に
ボタンが「プルプル」と震えるアニメーションは、ユーザーの注目を引きつけたり、遊び心を演出したいときに役立ちます。CTA（行動喚起）ボタンや、ゲーム風UI、インタラクティブな表現で活躍するテクニックです。CSSの@keyframesを使って簡単に実現できます。
HTML
|
1 2 3 |
<a href="#" class="shake-btn">登録する</a> |
基本CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.shake-btn { background-color: #e91e63; color: #fff; padding: 10px 20px; border: none; cursor: pointer; animation: shake 0.3s infinite; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } |
応用：マウスを乗せたときだけ震える
常時ではなく、ホバー時のみ動かしたいときにはhoverと組み合わせま
|
1 2 3 4 5 6 7 8 9 10 |
.shake-btn { animation: none; transition: transform 0.2s; } .shake-btn:hover { animation: shake 0.3s infinite; } |
備考
アニメーションは常時動かすと煩わしくなる可能性があるため、用途に応じて制御を
