通知ベル振動

<button class="d08-03-06-btn" type="button" aria-label="通知">
          <svg class="d08-03-06-bell" viewBox="0 0 24 24" width="42" height="42" aria-hidden="true">
            <path fill="#2a2d3a" d="M12 2a6 6 0 0 0-6 6c0 3.4-1 5.2-2 6.4-.5.6-.1 1.6.8 1.6h14.4c.9 0 1.3-1 .8-1.6-1-1.2-2-3-2-6.4a6 6 0 0 0-6-6z"/>
            <path fill="#2a2d3a" d="M10 19a2 2 0 0 0 4 0z"/>
          </svg>
          <span class="d08-03-06-badge">3</span>
        </button>

.d08-03-06-btn{background:#fff;border:1.5px solid #e2e2e8;border-radius:14px;width:64px;height:64px;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
        .d08-03-06-bell{transform-origin:top center}
        .d08-03-06-btn:hover .d08-03-06-bell,.d08-03-06-btn.is-ring .d08-03-06-bell{animation:d08-03-06-shake .7s ease}
        @keyframes d08-03-06-shake{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}}
        .d08-03-06-badge{position:absolute;top:8px;right:10px;background:#ff3b52;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
        .d08-03-06-btn:hover .d08-03-06-badge,.d08-03-06-btn.is-ring .d08-03-06-badge{animation:d08-03-06-bump .7s ease}
        @keyframes d08-03-06-bump{0%,100%{transform:scale(1)}30%{transform:scale(1.4)}50%{transform:scale(.85)}70%{transform:scale(1.15)}}

(function(){
        var btn=document.querySelector('#item-08-03-06 .d08-03-06-btn');if(!btn)return;
        btn.addEventListener('click',function(){btn.classList.remove('is-ring');void btn.offsetWidth;btn.classList.add('is-ring');});
      })();