JSFiddle - React, Tailwind, and code Playground
HTML
<form method="post" action="camount.php" id="loginForm"> <span id="heading">Username: <input type="text" name='us' id='us'/><br />
Password: <input type="password" name='pa' id='pa'/><br /></span>
<input type="button" value="Sign in" onclick="isPasswordCorrect()" />
<br /> <span class="animated" id="report"></span>
</form>
CSS
.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.animated.hinge {
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
}
}
@-moz-keyframes shake {
0%, 100% {
-moz-transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-moz-transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform: translateX(10px);
}
}
@-o-keyframes shake {
0%, 100% {
-o-transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-o-transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-o-transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
span#report {
display: block;
color: #F80000;
}
JavaScript
function isPasswordCorrect() {
var asd = document.getElementById('report');
asd.innerHTML = "wrong password/username";
asd.className = "";
asd.className = "animated shake";
}