No.092
MICRO CSSJS

Badge Bounce

通知バッジが数値更新のたびに弾むマイクロインタラクション。新着・カート・通知の気づきを高める。

DEMO

🔔1

CODE

HTML
<div class="demo-stage bb-stage"><div class="bb-bell">🔔<span class="bb-badge">1</span></div><button class="bb-btn" type="button">+ NOTIFY</button></div>
CSS
.bb-stage { display:flex; flex-direction:column; align-items:center; gap:1.6rem; padding:3rem; background:#0F0F12; min-height:280px; }
.bb-bell { position:relative; font-size:3rem; }
.bb-badge { position:absolute; top:-2px; right:-6px; min-width:22px; height:22px; padding:0 5px; display:flex; align-items:center; justify-content:center; background:#E91B89; color:#fff; font-family:'Oswald',sans-serif; font-size:.75rem; border-radius:11px; }
.bb-badge.bounce { animation:bb .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes bb { 0% { transform:scale(1); } 40% { transform:scale(1.5); } 100% { transform:scale(1); } }
.bb-btn { background:transparent; border:1px solid #E91B89; color:#E91B89; font-family:'Oswald',sans-serif; letter-spacing:.15em; font-size:.72rem; padding:.5rem 1.2rem; cursor:pointer; border-radius:4px; }
JS
(function(){
  var badge = document.querySelector('.bb-badge'), btn = document.querySelector('.bb-btn');
  if(!badge || !btn) return;
  var n = 1;
  btn.addEventListener('click', function(){
    n++; badge.textContent = n;
    badge.classList.remove('bounce'); void badge.offsetWidth; badge.classList.add('bounce');
  });
})();

AI PROMPT

Claude Cursor v0
PROMPT
通知バッジが数値更新のたびに弾むマイクロインタラクションを作って。バッジに @keyframes で scale(1)→scale(1.5)→scale(1) の bounce を定義（cubic-bezier(.34,1.56,.64,1)）。更新時に textContent を変え、bounceクラスを一度外して void el.offsetWidth で強制リフロー→再付与してアニメを毎回再生。新着・カート・通知の気づきを高める。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

バッジバウンス（Badge Bounce）とは

通知バッジが数値更新のたびに弾むマイクロインタラクション。新着・カート・通知の気づきを高める。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。