Enter送信でアニメーションするボタン

<form class="d08-10-10-form">
          <input class="d08-10-10-input" type="text" placeholder="メッセージを入力してEnter">
          <button class="d08-10-10-submit" type="submit" aria-label="送信">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="#fff" d="M3 11l18-8-8 18-2.5-7.5z"/></svg>
          </button>
        </form>

.d08-10-10-form{display:flex;align-items:center;gap:8px;width:100%;max-width:260px;background:#f3f4f8;border-radius:99px;padding:6px 6px 6px 16px}
        .d08-10-10-input{flex:1;border:none;background:none;outline:none;font-size:13px;min-width:0}
        .d08-10-10-submit{flex:none;width:36px;height:36px;border-radius:50%;border:none;background:#9aa0ac;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
        .d08-10-10-submit.is-sent{background:#22c55e;animation:d08-10-10-pop .5s cubic-bezier(.2,1.5,.4,1)}
        @keyframes d08-10-10-pop{0%{transform:scale(1) rotate(0)}45%{transform:scale(1.25) rotate(18deg)}100%{transform:scale(1) rotate(0)}}
        .d08-10-10-input:focus-visible,.d08-10-10-submit:focus-visible{outline:2px solid #6a5cff;outline-offset:2px}

(function(){
        var form=document.querySelector('#item-08-10-10 .d08-10-10-form');if(!form)return;
        var btn=form.querySelector('.d08-10-10-submit');
        form.addEventListener('submit',function(e){
          e.preventDefault();
          btn.classList.remove('is-sent');void btn.offsetWidth;btn.classList.add('is-sent');
        });
      })();