Skip to content

Invalid Input Shake Animation

Simple shake animation when invalid input, very helpful for form validation

Amat Qoimam

Created by / Amat Qoimam

HTML
<input type="text" placeholder="Enter username" pattern="[a-z]*" />
CSS
@keyframes shake {
  25% {
    transform: translateX(0.5rem);
  }
  50% {
    transform: translateX(-0.5rem);
  }
  75% {
    transform: translateX(0.5rem);
  }
}

input:invalid {
  animation: shake 0.3s;
  /* other style */
}
Edit on GitHub