人がログインしようとして資格情報が正しくない場合、揺れる 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>