Skip to content

Instantly share code, notes, and snippets.

@eebanos

eebanos/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Save eebanos/9892812 to your computer and use it in GitHub Desktop.
Save eebanos/9892812 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<link rel='stylesheet' href='style.css' />
</head>
<body>
<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('animation-name', 'shake');
$('#myform').css('-moz-animation-name', 'shake');
$('#myform').css('-webkit-animation-name', 'shake');
}, 0);
}
return false;
}
});
});
</script>
</body>
</html>
Raw
style.css
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment