Error re-starting CSS 3 animation after Ajax response

Question

Here is the HTML form

<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(document.getElementById('us'), document.getElementById('pa'))" /><br /> <span class="animated shake" id="report"></span> </form> 

Here is the corresponding JavaScript function code called

 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ if(xmlhttp.responseText) document.getElementById("loginForm").submit() else{ document.getElementById("report").style.webkitAnimationName = ""; setTimeout(function (){ document.getElementById("report").style.webkitAnimationName="animated shake"; }, 0); var element = document.getElementById('report'); element.innerHTML = "wrong password/username" password.value = "" } } xmlhttp.open("post", "CheckCred.php", true) //required for sending data through POST xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") xmlhttp.send("name="+encodeURIComponent(name.value)+ "&password="+encodeURIComponent(password.value)) 

Here is the CSS that should make the text in the <span> red and shake. He looks red, he does not tremble.

 .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; } 

I am trying to follow this issue to no avail. I would like this to work in FireFox. Can someone give me any guidance as to what I am doing wrong and why the text “wrong username / password” is not shaking?

As suggested by MarZab, I tried

 document.getElementById("report").style.webkitAnimationName = ""; setTimeout(function (){ document.getElementById("report").style.webkitAnimationName = ""; document.getElementById("report").style.webkitAnimationName = "animated shake"; }, 4); 

and he still doesn’t tremble.

Answer 1

Use className instead of webkitAnimationName

http://jsfiddle.net/5832R/99/

as discussed in the chat, the real problem was the execution line

browsers typically change the state of the DOM after code execution, and since the class remains unchanged within the same execution code, the animation was not restarted.

put the cancel on another line of execution, i.e. out of request, forced the DOM to change

valid code:

 function isPasswordCorrect(name, password) { report.className = ""; xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") xmlhttp.onreadystatechange=function() { report = document.getElementById('report'); report.className = "animated shake"; } }