バイブレーション風シェイク入力

<div class="d08-11-01-wrap">
          <label class="d08-11-01-label" for="d08-11-01-input-08-11-01">認証コード（4桁）</label>
          <div class="d08-11-01-row">
            <input class="d08-11-01-input" id="d08-11-01-input-08-11-01" type="text" placeholder="0000" maxlength="4">
            <span class="d08-11-01-vib" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18"><path d="M2 9v6M6 6v12M18 6v12M22 9v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg></span>
          </div>
          <button class="d08-11-01-btn" type="button">送信</button>
        </div>

.d08-11-01-wrap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:210px}
        .d08-11-01-label{font-size:11px;font-weight:700;color:#6b7280}
        .d08-11-01-row{display:flex;align-items:center;gap:8px}
        .d08-11-01-input{flex:1;min-width:0;border:1.5px solid #d8dae2;border-radius:8px;padding:10px 12px;font-size:14px;outline:none;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
        .d08-11-01-input.is-buzz{border-color:#ff3b52;box-shadow:0 0 0 3px rgba(255,59,82,.15);animation:d08-11-01-buzz .38s linear}
        @keyframes d08-11-01-buzz{0%,100%{transform:translateX(0)}10%{transform:translateX(-3px)}20%{transform:translateX(3px)}30%{transform:translateX(-3px)}40%{transform:translateX(3px)}50%{transform:translateX(-2px)}60%{transform:translateX(2px)}70%{transform:translateX(-2px)}80%{transform:translateX(2px)}90%{transform:translateX(-1px)}}
        .d08-11-01-vib{color:#d8dae2;flex-shrink:0;transition:color .2s}
        .d08-11-01-vib.is-buzz{color:#ff3b52;animation:d08-11-01-flicker .38s steps(6)}
        @keyframes d08-11-01-flicker{0%,100%{opacity:1}20%{opacity:.3}40%{opacity:1}60%{opacity:.3}80%{opacity:1}}
        .d08-11-01-btn{background:#2a2d3a;color:#fff;border:none;border-radius:8px;padding:10px;font-size:13px;font-weight:700;cursor:pointer}
        .d08-11-01-btn:hover{background:#3b3f52}

(function(){
        var input=document.querySelector('#item-08-11-01 .d08-11-01-input');
        var vib=document.querySelector('#item-08-11-01 .d08-11-01-vib');
        var btn=document.querySelector('#item-08-11-01 .d08-11-01-btn');
        if(!input||!vib||!btn)return;
        btn.addEventListener('click',function(){
          input.classList.remove('is-buzz');void input.offsetWidth;input.classList.add('is-buzz');
          vib.classList.remove('is-buzz');void vib.offsetWidth;vib.classList.add('is-buzz');
        });
      })();