css CSS3关键帧抖动效果

Posted 2021-05-13

<form id="myform">
        <input type="text" name="login" id="login" />
        <input type="password" name="password" id="password" />
        <button type="submit">Submit</button>
    </form>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#myform").submit(function(event) {
 
                if (!$('#login').val() || !$('#password').val()) {
                    if (!$("#myform").hasClass("shake")) {
                            $("#myform").addClass("shake");
                    } else {
                        $('#myform').css('animation-name', 'none');
                        $('#myform').css('-moz-animation-name', 'none');
                        $('#myform').css('-webkit-animation-name', 'none');
 
                        setTimeout(function() {
                            $('#myform').css('-webkit-animation-name', 'shake');
                        }, 0);
                    }
 
                    return false;
                }
            });
        });
    </script>

@keyframes shake{ 
    0% { transform: translate(3px, 0); }
    50% { transform: translate(-3px, 0); }
    100% { transform: translate(0, 0); }
}
 
@-moz-keyframes shake{ 
    0% { -moz-transform: translate(3px, 0); }
    50% { -moz-transform: translate(-3px, 0); }
    100% { -moz-transform: translate(0, 0); }
}
 
@-webkit-keyframes shake {
    0% { -webkit-transform: translate(3px, 0); }
    50% { -webkit-transform: translate(-3px, 0); }
    100% { -webkit-transform: translate(0, 0); }
}
 
.shake {
    animation-name: shake; 
    animation-duration: 150ms; 
    animation-iteration-count: 2; 
    animation-timing-function: linear;
 
    -moz-animation-name: shake; 
    -moz-animation-duration: 150ms; 
    -moz-animation-iteration-count: 2; 
    -moz-animation-timing-function: linear;
 
    -webkit-animation-name: shake;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
}