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.

MarZab · Accepted Answer · 2013-05-18T00:42:09.323

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

edited May 18 '13 at 00:42

answered May 15 '13 at 21:30

MarZab

2,543
21
28

Still no. If you like up-vote the question so it gets more attention. – Celeritas May 15 '13 at 22:26
Where did you want me to add the code anyways, right before `element.innerHTML = "wrong password/username"`? Did you expect me to remove the code regarding the timeout? – Celeritas May 16 '13 at 20:15
you should replace/add this inside the timeout. why do you have a timeout 0 anyway? – MarZab May 16 '13 at 20:57
For the timeout I'm trying to follow [this answer](http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript) and that is what they have. I don't really understand it, if you can explain it that would be great thanks. – Celeritas May 16 '13 at 23:24
So I copied and pasted your code and it doesn't work for me. I know it works in jsfiddle. I can't imagine what is doing this. – Celeritas May 17 '13 at 23:00
Hmm I've only got it locally on my computer, is there a program I can use to show you what I see? i.e. TeamViewer...oh wait on SO there's no private messaging so I wouldn't be able to give you the log in details :/ – Celeritas May 18 '13 at 00:06
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30161/discussion-between-marzab-and-celeritas) – MarZab May 18 '13 at 00:08

Trouble re-triggering CSS 3 animation after Ajax response

1 Answers1