XPバー加算アニメ

<div class="d09-06-04-box">
          <div class="d09-06-04-head"><span>XP</span><span class="d09-06-04-val"><span class="d09-06-04-cur">320</span>/500</span></div>
          <div class="d09-06-04-bar"><div class="d09-06-04-fill"></div></div>
          <button type="button" class="d09-06-04-btn">経験値+80を獲得</button>
        </div>

.d09-06-04-box{width:100%;max-width:260px}
        .d09-06-04-head{display:flex;justify-content:space-between;font-size:11.5px;color:#64748b;margin-bottom:6px;font-weight:700}
        .d09-06-04-bar{position:relative;height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden}
        .d09-06-04-fill{position:absolute;inset:0;width:64%;border-radius:999px;
          background:linear-gradient(90deg,#34d399,#10b981);transition:width .7s cubic-bezier(.25,.8,.3,1)}
        .d09-06-04-btn{margin-top:14px;border:none;border-radius:999px;padding:9px 18px;
          background:#059669;color:#fff;font-size:12px;font-weight:700;cursor:pointer;width:100%}

(function(){
        var root=document.getElementById('item-09-06-04');
        if(!root)return;
        var fill=root.querySelector('.d09-06-04-fill');
        var curEl=root.querySelector('.d09-06-04-cur');
        var btn=root.querySelector('.d09-06-04-btn');
        var max=500,cur=320;
        function render(v){
          curEl.textContent=Math.round(v);
          fill.style.width=(Math.min(v,max)/max*100)+'%';
        }
        render(cur);
        btn.addEventListener('click',function(){
          var target=Math.min(cur+80,max);
          var start=cur,diff=target-start,t0=null;
          function step(ts){
            if(!t0)t0=ts;
            var p=Math.min((ts-t0)/700,1);
            render(start+diff*p);
            if(p<1){requestAnimationFrame(step);}
            else{
              cur=target;
              if(cur>=max){setTimeout(function(){cur=0;render(0);},900);}
            }
          }
          requestAnimationFrame(step);
        });
      })();