Detect Invalid Input With Shake Animation in CSS

Today in this Concept, I am going to tell you, Create Shake Animation on Invalid Reactive Form Input Fields in CSS.Shaking an element can be very useful. It can call for attention and focus.For Example, When a user try to enter numbers in the input box, input will shake and an display some css styling will be shown in the page.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    Detect Invalid Input With Shake Animation
  </title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h3>How to Detect Invalid Input ?</h3>
  <input type="text" placeholder="Enter Username" pattern="[a-z]*">
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
h3{
  font-size: 25px;
  font-weight: normal;
}
input{
  height: 50px;
  width: 400px;
  padding: 5px 10px;
  outline: none;
  border:2px solid #333;
  border-radius: 3px;
  font-size: 18px;
}
input:invalid{
  border-color: red;
  animation: shake 0.5s infinite;
}
input:valid{
  border-color: green;
}

@keyframes shake {
  0% {transform: translateX(4px);}
  50% {transform: translateX(-4px);}
  100% {transform: translateX(4px);}
}

Output

Detect Invalid Input With Shake Animation in CSS

Source Code :

css/style.css

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects