Shake on Invalid Input in HTML and CSS

<input type="text" pattern="[a-z]* ">

input:invalid {
  animation: shake 300ms;
  color: red;
}
@keyframes shake {
  25% {
    transform: translateX(4px);
  }
  50% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}