トゥルンと弾む通知バッジ

<div class="d08-11-05-stage">
          <button class="d08-11-05-bell" type="button" aria-label="通知を受信する">
            <svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true"><path fill="#6b7280" d="M12 22a2.4 2.4 0 0 0 2.4-2.4h-4.8A2.4 2.4 0 0 0 12 22zm7-6.4V11a7 7 0 0 0-5.6-6.86V3a1.4 1.4 0 1 0-2.8 0v1.14A7 7 0 0 0 5 11v4.6L3 17.6V19h18v-1.4l-2-2z"/></svg>
            <span class="d08-11-05-badge">0</span>
          </button>
          <span class="d08-11-05-hint">クリックで通知受信</span>
        </div>

.d08-11-05-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-11-05-bell{position:relative;background:none;border:none;cursor:pointer;padding:10px}
        .d08-11-05-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff3b52;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;transform-origin:center;box-sizing:border-box}
        .d08-11-05-badge.is-jelly{animation:d08-11-05-jelly .55s cubic-bezier(.3,1.5,.4,1)}
        @keyframes d08-11-05-jelly{0%{transform:scale(1,1)}20%{transform:scale(1.5,.6)}40%{transform:scale(.7,1.35)}60%{transform:scale(1.2,.8)}80%{transform:scale(.9,1.08)}100%{transform:scale(1,1)}}
        .d08-11-05-hint{font-size:11px;color:#9aa0ad}

(function(){
        var bell=document.querySelector('#item-08-11-05 .d08-11-05-bell');
        var badge=document.querySelector('#item-08-11-05 .d08-11-05-badge');
        if(!bell||!badge)return;
        var count=0;
        bell.addEventListener('click',function(){
          count++;badge.textContent=String(count);
          badge.classList.remove('is-jelly');void badge.offsetWidth;badge.classList.add('is-jelly');
        });
      })();