Javascript在PHP中觸發了CSS動畫？

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」是持有PHP頁面的HTML部分的div。

有沒有關於爲什麼這不起作用的任何想法？

繼承人的CSS

@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效果將應用。