CSS

Shake On The Invalid Input

<!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>Document</title>
</head>

<body>
    <div class="center">
        <h2>Shake On Invalid Input</h2>
        <input type="text" pattern="[a-z]*">
    </div>
    <style>
        .center {
            height: 97vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        input[type=text] {
            border: 3px solid #ccc;
            height: 2rem;
            width: 18rem;
        }

        input:invalid {
            animation: shake 300ms;
        }

        @keyframes shake {
            25% {
                transform: translateX(4px);
            }

            50% {
                transform: translateX(-4px);
            }

            75% {
                transform: translateX(4px);
            }
        }
    </style>
</body>

</html>

Shahjaha Shaikh

I am a .Net developer with extensive experience with designing and developing large-scale applications. Key Areas Of Expertise: • ASP.NET Core MVC • ASP.NET Core Web API • C# • ASP.NET MVC 5 • Angular All versions • HTML5 • CSS3 / SCSS • Bootstrap • JavaScript • Angular Material.