画面の中に、ひとつだけ呼吸しているボタンがある。クリックを待ちながら、波紋のように輪が広がっては消え、また広がる。視線がそこに引き寄せられるのに、うるさくない。「ここを押してください」という意志が、静かに、でも確実に伝わってくる——エコー・リング系のパルスアニメーションが持つ、独特の訴求力です。
CSSのパルスリングは、::after 疑似要素を transform: scale と opacity のアニメーションで動かすのが現代的な実装方法です。box-shadow のspread値を動かす方法より描画負荷が低く、60fpsで安定して動作します。この記事では、常時ループするシンプルな1重パルスから、ホバー時だけ発動するリプルまで5パターンを紹介します。JavaScriptは不要で、コピペしてすぐ使えるコードを用意しています。
Simple Pulse（シンプル・パルス）
1本の輪が外側へ広がり続ける、パルスアニメーションの基本形です。::after 疑似要素に scale(1) から scale(1.9) へのアニメーションを infinite でループさせています。opacity が同時に0に向かうため、輪が遠ざかるほど薄くなり、自然なフェードアウトで消えます。
常時ループするアニメーションは「今すぐ購入」「無料で試す」など、ファーストビューのCTAボタンで使うと効果的です。ページを開いた瞬間から動き続けるので、スクロールせずとも「ここにアクションがある」と認識してもらいやすくなります。暗い背景との組み合わせでコントラストが生まれ、より発光して見えます。
See the Pen Simple Pulse by BaseKENT (@basekent) on CodePen.
調整方法
- 広がり幅:
scale(1.9)の数値を大きくするほど輪が遠くまで広がります。2.5以上にすると広大な余韻が出ますが、隣の要素に干渉する場合はoverflow: hiddenを親要素に設定してください - 速度:
animation: simplePulse 2sの2sを短くするほどテンポが速くなります。緊迫感を出したいなら1s、ゆったり見せたいなら3sが目安です - 色:
background: #4f8ef7とボタン本体の背景色を同じに揃えることで、輪がボタンから生まれているように見えます
Double Echo（ダブル・エコー）
2本の輪が時間差で広がり続けるパターンです。::before と ::after に同じ @keyframes を適用しながら、::after に animation-delay: 0.8s を設定することで、前の輪を追いかけるように2本目が出発します。水面に石を投げたときの波紋に近い感覚で、より「広がっている感」が強調されます。
Single Pulseより奥行きが生まれるため、サービス紹介ページのメインCTAや、申し込みボタンをページ下部に単独で配置する場面に向いています。2本の輪が広がることで、視覚的な主張がある分、周囲にテキストや画像が少ない「ゆったりとしたレイアウト」で最も映えます。animation-delay の間隔を変えるだけでリズムのチューニングができる点も使い勝手の良さに繋がります。
See the Pen Double Echo by BaseKENT (@basekent) on CodePen.
調整方法
- 時間差:
animation-delay: 0.8sの値をanimationのdurationの1/3程度に設定すると均等な間隔に見えます。duration: 2.4sに対してdelay: 0.8sがその計算値です - 最大スケール:
scale(2.2)を3以上に設定するとより大きく広がります。ボタン周囲にスペースが十分にある場合は試してみてください - 色:
::beforeと::afterで別の色を設定することもできます。グリーン系の1本目に対してシアンの2本目にすると、より複雑な奥行き感が出ます
Color Pulse（カラー・パルス）
広がる輪が色変化しながらフェードアウトするパターンです。@keyframes 内で filter: hue-rotate() をアニメーションさせ、0度から360度まで回転させます。ベースカラーが赤（#e74c3c）なら、パルスが広がるにつれて青→緑と色相が変わり、派手な虹色の尾を引くような演出になります。
特にエンタメ系・ゲーム系・クリエイター系のサイトで使うと、サイトのトーンと馴染みやすい派手さになります。hue-rotate は filter プロパティなのでGPU処理になり、パフォーマンス面でも基本的に問題ありません（モバイル端末では動作確認を推奨）。ベースカラーを変えると色回転のスタート地点が変わるので、サイトのブランドカラーに合わせた見え方を試してみてください。
See the Pen Color Pulse by BaseKENT (@basekent) on CodePen.
調整方法
- 色変化の速さ:
hue-rotate(360deg)に到達するタイミングはanimation durationに依存します。2sなら1秒でちょうど半周します。速くしたい場合はdurationを短くします - ベースカラー:
background: #e74c3cを変えると色回転のスタート色が変わります。補色が映えるカラーを選ぶとパルスが広がる瞬間のコントラストが強くなります - 色変化を抑制:
hue-rotate(120deg)のように回転幅を狭めると、近似色の範囲でじわっと変化するより落ち着いた演出になります
Border Ring（ボーダー・リング）
背景色なしのアウトライン（枠線）だけが広がるパターンです。::after に background: transparent と border: 2px solid を設定し、塗りのない輪がスケールアウトしながら消えていきます。Simple Pulseと比べて、広がった後に背景が透けるため、テキストや画像の上に重なっても読みやすさを損ないません。
暗い背景に細い輪が広がるだけのシンプルな演出は、ポートフォリオサイトや高級感を出したいランディングページで効果的です。また、ボタン本体が透明なゴーストボタンとの組み合わせが特に相性が良く、「枠線で存在感を示す」というデザイン言語を統一できます。紫（#a855f7）を使用していますが、サイトのアクセントカラーに変えるだけで自然に馴染みます。
See the Pen Border Ring by BaseKENT (@basekent) on CodePen.
調整方法
- 枠線の太さ:
border: 2px solidの2pxを3pxや1pxに変えると印象が変わります。細いほど繊細で、太いほどエネルギッシュな印象になります - 枠線の色: ボタン本体の
borderと::afterのborderを同じ色にすることで、ボタンから輪が生まれているように見えます - フェードタイミング:
@keyframesの途中でopacity: 0.5のキーフレームを追加すると、中間地点で一度透明度を下げてから消えるという複雑な演出にできます
Hover-Only Ripple（ホバー・リプル）
マウスが乗った瞬間だけリングが発動し、離れると即座に消えるパターンです。デフォルト状態で ::after の opacity: 0 を指定し、:hover セレクタで animation を開始させます。ホバー時にアニメーションが走り始め、ホバーが外れると :hover スタイルが剥がれるため、輪がリセットされます。常時ループしないので、「押したときに反応する」フィードバック的な使い方に向いています。
フォームの送信ボタン・記事末尾のCTAボタン・ナビゲーションのアクションリンクなど、ユーザーが意識的に操作する場面に向いています。常時ループのパルスは「見てほしい」用途に向いていましたが、このパターンは「押す体験を豊かにする」用途で輝きます。アンバー（#f59e0b）は暗背景でも明るい印象になり、テキストに color: #1e293b（ダーク）を使うことで可読性を保っています。
See the Pen Hover-Only Ripple by BaseKENT (@basekent) on CodePen.
調整方法
- アニメーション速度:
animation: hoverRipple 1sを0.6sに短縮するとシャープな反応感になります。クリック系のフィードバックには速い方が自然に感じます - ループ回数:
infiniteを1にすると1回だけ広がって止まります。フォームの確認ボタンなど、1アクションに1反応させたい場合に使えます - 色: ボタン本体と輪の色（
background: #f59e0b）を揃えることで視覚的な一体感が生まれます。差し色を使いたい場合は補色系でコントラストを出すと目立ちます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
