css3_animation/stylesheets/style.css
@-webkit-keyframesshake{
0%{left:0;}
20%{left:-2%;}
40%{left:2%;}
60%{left:-2%;}
80%{left:2%;}
100%{left:0;}
}Remember to add in the -moz- and -opera- prefixes as well if you want to support
those browsers.Now that we have the keyframes for the animation defined, we can apply the
animation to a CSS rule. We need to trigger the shake effect only when the
user submits the form and gets the username and password wrong. So, we’ll
use jQuery to capture the form submission and make an Ajax call. Then we’ll
add a shake class to the form, which will trigger the animation. Let’s start by
defining the shake rule in our style sheet, like this:.shake{
animation-name:shake;
animation-duration:0.5s;
animation-delay:0;
animation-iteration-count:1;
animation-timing-function:linear;
}This markup looks very similar to the way we define transitions. We have
control over the animation, the timing function, the duration, the delay, and
the iteration count.That’s a lot of typing, especially since we also need to add the vendor prefixes
to these rules. Let’s reduce that to the shorthand notation:css3_animation/stylesheets/style.css
.shake{
-webkit-animation:shake0.5s1;
-moz-animation:shake0.5s1;
animation:shake0.5s1;
}That takes care of the CSS part. Now we just need to apply the style when
the form submission fails. First let’s make a function that does the Ajax
request. In javascripts/form.js, add this new method:css3_animation/javascripts/form.js
varprocessLogin=function(form,event){
event.preventDefault();
varrequest= $.ajax({Chapter 8. Eye Candy • 174
Download from Wow! eBook <www.wowebook.com> report erratum • discuss