Trouble re-triggering CSS 3 animation after Ajax response

Question

Here is an 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 relevant code of the JavaScript function that is 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 is supposed to make the text in the <span> tag appear in red and shake. It does appear in red, it does not shake.

.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've been trying to follow this question to no avail. I would like this to work in FireFox. Can any one give me any pointers as to what I'm doing wrong and why the text "wrong username/password" won't shake?

As per MarZab's suggestion I tried

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

and it still doesn't shake.

Answer 1

Use className instead of webkitAnimationName

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

as discused in chat, the real issue was execution line

browsers tend to only change the state of the DOM after executing code and since the class remained the same inside the same execution code, the animation was not retrigered.

putting the unset in another execution line, ie. outside of the request, forced the DOM to change

the valid code is:

function isPasswordCorrect(name, password) 
{ 
  report.className = ""; 

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 

  xmlhttp.onreadystatechange=function() 
  { 
    report = document.getElementById('report'); 
    report.className = "animated shake"; 
  } 
}