質問番号がアニメーションするアンケートナビ

<div class="d04-14-11-wrap">
          <div class="d04-14-11-badge"><span class="d04-14-11-cur">1</span>/<span class="d04-14-11-total">4</span></div>
          <p class="d04-14-11-txt">質問1: お名前を入力してください</p>
          <button type="button" class="d04-14-11-next">次の質問へ</button>
        </div>

.d04-14-11-wrap{width:min(280px,100%);text-align:center}
        .d04-14-11-badge{
          position:relative;display:inline-flex;align-items:center;justify-content:center;
          gap:2px;width:56px;height:56px;border-radius:50%;background:#eef2ff;color:#4a6cf7;
          font-size:16px;font-weight:800;margin-bottom:14px;overflow:hidden;
        }
        .d04-14-11-cur{display:inline-block;transition:transform .3s ease,opacity .3s ease}
        .d04-14-11-cur.is-out{transform:translateY(-14px);opacity:0}
        .d04-14-11-txt{margin:0 0 16px;font-size:13px;color:#444;min-height:20px}
        .d04-14-11-next{
          padding:10px 18px;font-size:13px;font-weight:700;color:#fff;
          background:#4a6cf7;border:none;border-radius:8px;cursor:pointer;transition:background .2s;
        }
        .d04-14-11-next:hover{background:#3a58d6}
        .d04-14-11-next:disabled{background:#c3c9d4;cursor:not-allowed}

(function(){
        var wrap=document.querySelector('.d04-14-11-wrap');
        if(!wrap)return;
        var cur=wrap.querySelector('.d04-14-11-cur');
        var txt=wrap.querySelector('.d04-14-11-txt');
        var btn=wrap.querySelector('.d04-14-11-next');
        var qs=['質問1: お名前を入力してください','質問2: ご年齢を選択してください','質問3: ご利用目的は?','質問4: ご意見・ご要望をどうぞ'];
        var n=1;
        btn.addEventListener('click',function(){
          if(n>=qs.length){
            txt.textContent='ご回答ありがとうございました。';
            btn.disabled=true;
            return;
          }
          cur.classList.add('is-out');
          setTimeout(function(){
            n++;
            cur.textContent=n;
            cur.classList.remove('is-out');
            txt.textContent=qs[n-1];
          },260);
        });
      })();