PHP中Javascript触发的CSS动画？

我想让它这样当一个人尝试登录和凭据不正确时，它会播放一个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>';

这是页面的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>

登录
用户名：

您可以使用javascript将类指定给元素，在指定类的同时，CSS效果将应用。
您缺少动画持续时间。对于WebKit，我相信会是这样的：

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

或者在CSS中：

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

不确定其他浏览器中CSS3的持续时间是什么-但我认为这肯定是你的问题

这里有一个
你能添加你的标记和CSS吗？
-webkit-animation-duration:'3s';