Shake On The Invalid Input

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="center">
        <h2>Shake On Invalid Input</h2>
        <input type="text" pattern="[a-z]*">
        .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);


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories