Javascript запускает анимацию CSS в PHP?

Question

Я хочу, чтобы это произошло, когда пользователь попытался войти в систему, а учетные данные были неверными, он воспроизводит анимацию CSS. Анимация уже настроена.

Это то, что мне нужно для воспроизведения анимации, или есть ошибка, из-за которой она не воспроизводится.

 // Tell the user they couldn't login becuase of incorrect credentials. 
     print("Login Failed. Make sure your credentials are correct!"); 
     echo '<script> 
     document.getElementById("ShakeBox").style.webkitAnimationName = ""; 
     document.getElementById("ShakeBox").style.msAnimationName = ""; 
     document.getElementById("ShakeBox").style.mozAnimationName = ""; 
     document.getElementById("ShakeBox").style.oAnimationName = ""; 
     document.getElementById("ShakeBox").style.AnimationName = ""; 
     setTimeout(function() 
     { 
       document.getElementById("ShakeBox").style.webkitAnimationName = "shake"; 
       document.getElementById("ShakeBox").style.msAnimationName = "shake"; 
       document.getElementById("ShakeBox").style.mozAnimationName = "shake"; 
       document.getElementById("ShakeBox").style.oAnimationName = "shake"; 
       document.getElementById("ShakeBox").style.AnimationName = "shake"; 
     }, 0); 
     </script>'; 

«ShakeBox» - это div, который содержит HTML-часть страницы PHP.

Есть ли идеи о том, почему это не работает?

Heres СМЧ

@charset "utf-8"; 
/* CSS Document */ 
div#Heading { 
margin:0 auto; 
text-align center; 
background:url('../Images/Dark-Metal.jpg'); 
background-repeat:repeat-x; 
color:#FFF; 
border:solid #FFF; 
} 

div#Heading h1 { 
margin:0 auto; 
text-align center; 
} 

div#LoginBackground { 
margin:0 auto; 
text-align:center; 
background:url('../Images/Light-Metal.jpg'); 
color:#000; 
border:solid #FFF; 
} 

@-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);} 
} 

@-ms-keyframes shake { 
0% 100% {transform: translateX(0);} 
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
20%, 40%, 60%, 80% {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; 
-ms-animation-name: shake; 
} 

#ShakeBox { 
-webkit-animation-name: shake; 
-moz-animation-name: shake; 
-o-animation-name: shake; 
animation-name: shake; 
-ms-animation-name: shake; 
} 

И Херес HTML часть страницы.

<link rel="stylesheet" type="text/css" href="../CSS/Login.css"> 
<div id="Heading"> 
<h1>Login</h1> 
</div> 
<div id="ShakeBox"> 
<div id="LoginBackground"> 
<form action="login.php" method="post"> 
Username:<br /> 
<input type="text" name="username" value="<?php echo "$submitted_username"; ?>" /> 
<br /><br /> 
Password:<br /> 
<input type="password" name="password" value="" /> 
<br /><br /> 
    <input type="submit" value="Login"/> 
</form> 
<a href="register.php">Register Here</a> 
</div> 
</div> 

Answer 1

Вам не хватает продолжительности анимации. Для WebKit я считаю, что это будет что-то вроде:

document.getElementById("ShakeBox").style.webkitAnimationDuration = "3s"; 

Или в вашем CSS:

-webkit-animation-duration:'3s'; 

Не уверен, что CSS3 спецификации для продолжительности в других браузерах - но я думаю, что это, безусловно, ваша проблема ,

Вот jsFiddle

Answer 2

Вы можете назначить класс с javascript для элемента и в точный момент, когда вы назначаете класс, применяется эффект CSS.