ボタンに常時アニメーションを付けると、クリック率が上がるという報告があります。静止しているボタンの中で1つだけ「動いている」ボタンがあれば、視線はそこに引き寄せられます。パルスビート系のアニメーションは transform: scale を @keyframes でループさせる手法で、Compositorレイヤーで処理されるためパフォーマンス的にも優秀です。派手なエフェクトではなく、「生きているような微細な動き」が特徴です。
今回は5種類のパルス系アニメーションを紹介します。心臓の2段階鼓動を再現したハートビート・2連バウンスの力強い鼓動・呼吸するようにゆっくり膨らむブリーズ・スケールと明度が連動するアラート系・ホバー時のみ1拍打つクイックビート、と用途別に設計しています。JavaScriptは不要、CSSのみで実装しています。
Heartbeat（ハートビート）
心臓の2段階鼓動パターンをCSSで再現します。@keyframes の 14%・42% で2回の scale ピークを作り、それぞれ scale(1.12) と scale(1.08) で強弱をつけることで、「ドクッ・ドク」という2段階の拍動感が生まれます。ピーク間にいったん scale(1) に戻るタイミングを入れるのが、単なる繰り返しとの違いです。
医療・ヘルスケア・フィットネス系サイトのCTAボタンに自然に馴染むデザインです。animation-timing-function: ease-in-out を指定することで、膨らむ・縮む動きがなめらかになります。周期は 1.4s ですが、緊急性を高めたい場合は 1.0s に短縮できます。
See the Pen Heartbeat by BaseKENT (@basekent) on CodePen.
調整方法
- 拍動の強さ:
scale(1.12)の値を大きくすると鼓動が強まります。1.06程度まで下げると控えめな動きに - 周期:
animation: heartbeat 1.4sの秒数を変更してください。1.0sで緊張感のある速い鼓動、2.0sでゆったりした脈拍になります - ボタン色: 医療・ヘルス系なら赤系（
#e11d48）、ウェルネス系なら青系（#0ea5e9）が自然です
Double Thump（ダブル・サンプ）
2連続の「ドクドク」という鼓動を再現します。2.2s の周期のうち最初の 30% で2回バウンスし、残りの 70% は静止するというリズムです。連続した動きと長い休止の組み合わせが、心拍の「間」を感じさせます。
強調した「今すぐ押してほしい」ボタンに向いています。カウントダウン表示・限定オファー・キャンペーンのCTAなど、緊急性のある文脈で使うと効果的です。Heartbeatとの違いは「2回の鼓動が近い間隔で続く」感覚にあり、より力強い存在感を出したい場合に選びます。
See the Pen Double Thump by BaseKENT (@basekent) on CodePen.
調整方法
- 2拍の間隔:
@keyframesの7%と21%のタイミングを近づけると2拍が速くなります。離すと間が空いた「ゆっくり2拍」になります - 休止の長さ: 周期（
2.2s）を長くすると鼓動後の静止時間が伸び、より「間」を感じる演出になります - バウンスの高さ:
scale(1.12)をscale(1.06)に下げると控えめな2拍、scale(1.18)に上げるとより主張の強い鼓動になります
Breathe（ブリーズ）
scale(1 → 1.06 → 1) を 3s ease-in-out infinite でループさせます。心拍ではなく「呼吸」のリズムで、ゆっくりと膨らんで戻るだけの非常にシンプルな実装です。変化量が 6% と小さいため、見ていることに気づかないくらいの微細な動きですが、そのぶんずっと見ていても疲れません。
CTA誘導ではありますが押し付けがましくない場面——スクロールして見つけた購読ボタン・問い合わせフォームの送信ボタン・ポートフォリオの「仕事を依頼する」ボタンなど——で「静かに存在感を主張する」効果があります。
See the Pen Breathe by BaseKENT (@basekent) on CodePen.
調整方法
- 呼吸の深さ:
scale(1.06)をscale(1.03)にするとほぼ動いていない静けさに、scale(1.1)にすると存在感のある大きな呼吸になります - 周期:
3sを4sにするとよりゆっくりした呼吸に、2sにするとやや速い。5s以上にすると動きに気づきにくくなります - ライト背景への変更: 現在はグリーン×明るい背景ですが、暗い背景でも機能します。背景色とのコントラストを保てばどんな色にも適用できます
Alert Pulse（アラート・パルス）
transform: scale と filter: brightness を @keyframes で同期させ、ボタンが膨らむ瞬間に明度も上がる（brightness(1.25)）演出です。スケールだけの変化に比べて「光りながら鼓動する」視覚的なインパクトが加わります。
通知ボタン・未読バッジ・エラー警告・重要なアクションの強調など「必ず目に入ってほしい」場面に向いています。周期が 1s と短く、速い鼓動がアラート感を演出します。Compositorレイヤーで処理できる filter: brightness はアニメーションの負荷が低く、transform と組み合わせてもパフォーマンスを保てます。
See the Pen Alert Pulse by BaseKENT (@basekent) on CodePen.
調整方法
- 明度の変化:
filter: brightness(1.25)の値を上げるとより鮮やかに光ります。1.5まで上げると白く飛びそうな強さになります。1.1まで下げると光りながらも控えめに - 速度:
1sを0.7sにするとより緊迫感のある速い鼓動に、1.5sにすると穏やかなアラートになります - 色との組み合わせ: アンバー（
#f59e0b）以外に、赤（#ef4444）で危険系・スカイブルー（#0ea5e9）でインフォ系の通知にも使えます
Quick Beat（クイック・ビート）
常時アニメーションではなく、ホバー時のみ1拍打つ実装です。.btn:hover に animation: quick-beat 0.35s ease-out を指定することで、マウスを乗せた瞬間にボタンが一度だけ scale(1.1) まで膨らんで戻ります。
常時アニメーションは「ページ全体が動いているように見える」疲れを読者に与えることがあります。Quick Beatはインタラクション時のみ発動するため、静止画面を保ちながらもホバーに対して生き生きとしたフィードバックを返せます。ナビゲーション・サイドバーのリンクボタン・一覧ページの各カードのCTAなど、複数配置するボタンに向いています。
See the Pen Quick Beat by BaseKENT (@basekent) on CodePen.
調整方法
- 拍動の高さ:
scale(1.1)をscale(1.05)にするとほんのり弾む感触に、scale(1.15)にするとより大きく跳ねます - 速さ:
0.35sを0.2sにするとスナップ感のある素早い1拍に、0.5sにするとやわらかい弾みになります - 常時アニメーションに変える:
:hoverセレクタを外して.btnに直接animation: quick-beat 1.5s ease-out infiniteを当てると、常時ループする鼓動アニメーションに変えられます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
