未入力シェイクフィールド

<div class="d04-11-04-field">
          <label class="d04-11-04-label" for="d04-11-04-input">お名前 <span class="d04-11-04-req">必須</span></label>
          <input type="text" class="d04-11-04-input" id="d04-11-04-input" placeholder="山田 太郎">
          <p class="d04-11-04-err">この項目は必須です</p>
        </div>

.d04-11-04-field{width:min(270px,100%)}
        .d04-11-04-label{display:block;margin-bottom:6px;font-size:13px;color:#555;font-weight:700}
        .d04-11-04-req{font-size:10px;color:#e5484d;border:1px solid #e5484d;border-radius:4px;padding:1px 5px;margin-left:4px;font-weight:700}
        .d04-11-04-input{width:100%;padding:12px 14px;font-size:14px;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-04-input:focus{border-color:#4a6cf7}
        .d04-11-04-err{display:none;margin:6px 0 0;font-size:12px;color:#e5484d}
        .d04-11-04-field.is-error .d04-11-04-input{border-color:#e5484d;animation:d04-11-04-shake .45s ease}
        .d04-11-04-field.is-error .d04-11-04-err{display:block}
        @keyframes d04-11-04-shake{
          0%,100%{transform:translateX(0)}
          20%{transform:translateX(-8px)}
          40%{transform:translateX(8px)}
          60%{transform:translateX(-5px)}
          80%{transform:translateX(5px)}
        }

(function(){
        var field=document.querySelector('.d04-11-04-field');
        if(!field)return;
        var input=field.querySelector('.d04-11-04-input');
        input.addEventListener('blur',function(){
          field.classList.remove('is-error');
          if(input.value.trim()===''){
            void field.offsetWidth;
            field.classList.add('is-error');
          }
        });
        input.addEventListener('input',function(){
          field.classList.remove('is-error');
        });
      })();