30-seconds-of-code/snippets/shake-invalid-input.md

title, tags, expertise, cover, firstSeen, lastUpdated

title	tags	expertise	cover	firstSeen	lastUpdated
Shake on invalid input	animation	beginner	blog_images/perfect-timing.jpg	2022-07-31T18:30:11+03:00	2022-07-31T18:30:11+03:00

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.

 <input type="text" placeholder="Accept Alphabets 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.6em red;
}