Shake on invalid input

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;
}

More like this

  • Shifting Card

    Creates a card that shifts on hover.

    CSS, Animation · Dec 14, 2022

  • Typewriter effect

    Creates a typewriter effect animation.

    CSS, Animation · May 24, 2021

  • Staggered animation

    Creates a staggered animation for the elements of a list.

    CSS, Animation · Oct 11, 2021