Invalid Input Shake Animation

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

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