Problemi re-innescare CSS 3 animazione dopo la risposta Ajax

Question

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

Ecco il codice rilevante della funzione JavaScript che viene chiamata

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)) 

Ecco il CSS che è si suppone che il testo nel tag <span> appaia in rosso e scuota. Appare in rosso, non si agita.

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

Ho cercato di seguire this question senza alcun risultato. Mi piacerebbe che funzionasse in FireFox. Qualcuno può darmi qualche indicazione su cosa sto facendo male e perché il testo "nome utente/password errato" non tremerà?

Come da suggerimento di MarZab ho cercato

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

e ancora non scuote.

Answer 1

Uso className invece di webkitAnimationName

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

come discused in chat, il vero problema era execution line

browser tendono a cambiare solo lo stato del DOM dopo l'esecuzione di codice e dal momento che la classe è rimasto lo stesso all'interno dello stesso codice di esecuzione, l'animazione non è stata rinviata.

mettendo il disinserito in un'altra linea di esecuzione, vale a dire. al di fuori della richiesta, costretto il DOM per cambiare

il codice valido è:

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

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") 

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