Error Shake Validation Field

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="shake-field">
  <input type="text" class="shake-input" placeholder="Numbers only or shake" pattern="[0-9]*" oninput="if(this.value && !/^\d+$/.test(this.value)){ this.classList.add('shake'); setTimeout(()=>this.classList.remove('shake'), 400); this.value=''; }" />
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.shake-field {
  display: flex;
  justify-content: center;
}
.shake-input {
  width: 200px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  color: #64748b;
  outline: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: border-color 0.2s;
}
.shake-input.shake {
  animation: shakeAnim 0.4s cubic-bezier(.36,.07,.19,.97) both;
  border-color: #ef4444;
}
@keyframes shakeAnim {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}