Javascript triggered CSS Animation in PHP?

Question

I want to make it so when a person try's logging in and the credentials are incorrect, it plays a shake CSS Animation. The Animation is already set up.

Is this what I need to play the animation or is there an error that is making it not play.

        // 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>';

The "ShakeBox" is the div that is holding the HTML part of the PHP page.

Is there any ideas on why this doesn't work?

Heres the 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;
}

And heres the HTML part of the page.

    <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>

Can you add your markup and CSS and [set up a demo](http://jsfiddle.net)? — Evan Davis, Aug 02 '13 at 21:00

score 0 · Answer 1 · answered Aug 02 '13 at 21:02

0

You can assign class with javascript to element and at the exact moment you assign class, the CSS effect will apply.

answered Aug 02 '13 at 21:02

Michal Hojgr

134
8

score 0 · Accepted Answer · answered Aug 02 '13 at 21:18

You're missing an animation duration. For WebKit I believe it would be something like:

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

Or in your CSS:

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

Not sure what the CSS3 specs for duration in other browsers are - but I think this is definitely your problem.

Here's a jsFiddle

Javascript triggered CSS Animation in PHP?

2 Answers2