ランキング順位変動アニメ

<div class="d09-06-08-box">
          <ol class="d09-06-08-list">
            <li class="d09-06-08-row"><span class="d09-06-08-rank">1</span><span class="d09-06-08-name">Aoi</span><span class="d09-06-08-pt">980pt</span></li>
            <li class="d09-06-08-row"><span class="d09-06-08-rank">2</span><span class="d09-06-08-name">Rio</span><span class="d09-06-08-pt">860pt</span></li>
            <li class="d09-06-08-row d09-06-08-me"><span class="d09-06-08-rank">3</span><span class="d09-06-08-name">You</span><span class="d09-06-08-pt">790pt</span></li>
            <li class="d09-06-08-row"><span class="d09-06-08-rank">4</span><span class="d09-06-08-name">Sho</span><span class="d09-06-08-pt">710pt</span></li>
          </ol>
          <button type="button" class="d09-06-08-btn">スコア加算</button>
        </div>

.d09-06-08-box{display:flex;flex-direction:column;align-items:center}
        .d09-06-08-list{list-style:none;margin:0 0 14px;padding:0;width:100%;max-width:260px;display:flex;flex-direction:column;gap:8px}
        .d09-06-08-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
          background:#f1f5f9;font-size:12.5px;font-weight:700;color:#334155;
          transition:transform .5s cubic-bezier(.2,.8,.3,1)}
        .d09-06-08-me{background:#dbeafe;color:#1d4ed8}
        .d09-06-08-rank{width:18px;text-align:center;color:#94a3b8}
        .d09-06-08-me .d09-06-08-rank{color:#2563eb}
        .d09-06-08-name{flex:1}
        .d09-06-08-btn{border:none;border-radius:999px;padding:9px 20px;background:#2563eb;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}

(function(){
        var root=document.getElementById('item-09-06-08');
        if(!root)return;
        var list=root.querySelector('.d09-06-08-list');
        var btn=root.querySelector('.d09-06-08-btn');
        btn.addEventListener('click',function(){
          var me=list.querySelector('.d09-06-08-me');
          var prev=me.previousElementSibling;
          if(!prev)return;
          var firstMe=me.getBoundingClientRect();
          var firstPrev=prev.getBoundingClientRect();
          list.insertBefore(me,prev);
          list.querySelectorAll('.d09-06-08-rank').forEach(function(r,i){r.textContent=i+1;});
          var lastMe=me.getBoundingClientRect();
          var lastPrev=prev.getBoundingClientRect();
          me.style.transition='none';prev.style.transition='none';
          me.style.transform='translateY('+(firstMe.top-lastMe.top)+'px)';
          prev.style.transform='translateY('+(firstPrev.top-lastPrev.top)+'px)';
          requestAnimationFrame(function(){
            me.style.transition='transform .5s cubic-bezier(.2,.8,.3,1)';
            prev.style.transition='transform .5s cubic-bezier(.2,.8,.3,1)';
            me.style.transform='';prev.style.transform='';
          });
        });
      })();