Shake on invalid input

OSCC · CSS, Animation · Jul 31, 2022

Creates a shake animation on invalid input.

  • Use the pattern attribute to define the regular expression which the input's value must match.
  • Use @keyframes to define a shake animation, using the margin-left property.
  • Use the :invalid pseudo-class to apply an animation to make the element shake.
Preview
<input type="text" placeholder="Letters only" pattern="[A-Za-z]*" />
@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff0000;
}

Recommended snippets