商品カード+カート追加アニメ

<div class="d10-01-01-card">
          <div class="d10-01-01-thumb">🎧</div>
          <div class="d10-01-01-body">
            <p class="d10-01-01-name">ワイヤレスヘッドホン</p>
            <p class="d10-01-01-price">¥12,800</p>
            <button class="d10-01-01-add" type="button">カートに入れる</button>
          </div>
        </div>
        <div class="d10-01-01-cart">🛒<span class="d10-01-01-badge">0</span></div>
        <div class="d10-01-01-fly">🎧</div>

.d10-01-01{background:#f6f7fb}
        .d10-01-01-card{width:200px;background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(30,40,80,.1);overflow:hidden}
        .d10-01-01-thumb{height:120px;display:flex;align-items:center;justify-content:center;font-size:52px;background:linear-gradient(135deg,#a5b4fc,#c4b5fd)}
        .d10-01-01-body{padding:14px}
        .d10-01-01-name{margin:0;font-size:14px;font-weight:600;color:#1e293b}
        .d10-01-01-price{margin:4px 0 10px;font-size:17px;font-weight:700;color:#4f46e5}
        .d10-01-01-add{width:100%;border:none;border-radius:8px;padding:9px;background:#4f46e5;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s}
        .d10-01-01-add:hover{background:#4338ca}
        .d10-01-01-cart{position:absolute;top:16px;right:18px;font-size:30px}
        .d10-01-01-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
        .d10-01-01-badge.d10-01-01-pop{animation:d211bump .4s ease}
        @keyframes d211bump{0%,100%{transform:scale(1)}40%{transform:scale(1.5)}}
        .d10-01-01-fly{position:absolute;font-size:34px;opacity:0;pointer-events:none;left:0;top:0}
        .d10-01-01-fly.d10-01-01-go{animation:d211fly .8s cubic-bezier(.5,-.4,.6,1) forwards}
        @keyframes d211fly{0%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.2)}}

(function(){
        var root=document.getElementById('item-10-01-01');
        var btn=root.querySelector('.d10-01-01-add'),fly=root.querySelector('.d10-01-01-fly'),cart=root.querySelector('.d10-01-01-cart'),badge=root.querySelector('.d10-01-01-badge'),prev=root.querySelector('.d10-01-01');
        var n=0;
        btn.addEventListener('click',function(){
          var pr=prev.getBoundingClientRect(),tr=btn.getBoundingClientRect(),cr=cart.getBoundingClientRect();
          fly.style.setProperty('--sx',(tr.left-pr.left+tr.width/2-17)+'px');
          fly.style.setProperty('--sy',(tr.top-pr.top-10)+'px');
          fly.style.setProperty('--ex',(cr.left-pr.left+8)+'px');
          fly.style.setProperty('--ey',(cr.top-pr.top+4)+'px');
          fly.classList.remove('d10-01-01-go');void fly.offsetWidth;fly.classList.add('d10-01-01-go');
          setTimeout(function(){n++;badge.textContent=n;badge.classList.remove('d10-01-01-pop');void badge.offsetWidth;badge.classList.add('d10-01-01-pop');},560);
        });
      })();