How to add shake animation on input:invalid

In this short article we'll create a simple HTML with an input tag in a form tag and animate the input when user input is not valid. This might seem a bit difficult and you may think you need Javascript to complete this task,but with only HTML and CSS(keyframes) we'll get this done.

Let's write some code

In our css we style the input with the :invalid pseudo selector

Animations in CSS are mostly done with keyframes and so will our shake animation

We set the minimum length of our input to 5, this means the input is invalid if the user enters less than 5 characters. And the input box shakes when the user input is less than 5 , thus the form is invalid