Shake Animation on Invalid Inputs using HTML/CSS



In This Video:
I have shown how you can use css animation property on some invalid input. I have used a besic html input attribute with text type and shown the css code to get the animated response on invalid input.

As I have shown in the video -- 
Input should be any lower case characters from a to z. Except those inputs the text box shake a little bit to suggest you're writing something invalid.
That's about it. I hope you found the video helpful. Please write me in the comments.

➡️ Source-code:

.html/

<!DOCTYPE html>
<html>
<head>
  <title>Shake Animation</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <input
    type="text"
    pattern="[a-z]*"
    placeholder="Enter your name"
  >
</body>
</html>


.css/

input:invalid{
  animation: shake .3s;
}
@keyframes shake {
  25% { transform: translateX(10px)}
  50% { transform: translateX(-10px)}
  75% { transform: translateX(10px)}
}



Thank you so much!❤️

Explore My Full Playlist on HTML/CSS/JS:


Comments

Post a Comment

Type your feedback here...