How to create shake animation on invalid input using HTML CSS | CSS Invalid Input Shake Animation
<!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>KH Material</title>
<link rel="stylesheet" href="../css/Bootstrap v5.1.3.css">
<style>
.shank_ani{width:300px;margin:100px auto 0;}
h1{text-align:center;color:#00833e;margin-top:50px;font-size:16px;}
input:invalid{
animation: khpublishing 0.3s;
border:2px solid red;
}
@keyframes khpublishing {
25%{
transform: translateX(4px);
border:2px solid red;
}
50%{
transform: translateX(-4px);
border:2px solid red;
}
75%{
transform: translateX(-4px);
border:2px solid #00833e;
}
}
</style>
</head>
<body>
<div class="shank_ani">
<h1>Using HTML CSS to Validate Input on pattern : [A-Za-z]+</h1>
<input type="text"
class="form-control"
pattern="[A-Za-z]+"
placeholder="Enter your name"
>
</div>
</body>
</html>
No comments