Using Animate.css and jQuery for easy Web Animation

hey everyone Wes here so I wanted to show you guys how to use animate CSS if you haven't heard of it animate dot CSS is this great library that takes care of all the messy key framing that's involved in creating animations like a flash or rubber band or something like swing so it's just great library that you can just pop into your website and you're able to pretty much add animations within a number of seconds so to get it up and running all you need to do is click on download animate dot CSS and then include it into your project via a regular stylesheet link so I've done that right here for the purposes of this exercise what I've done here is I've just set up a very simple HTML document have loaded in animate CSS I've got ourselves a link of the class of button and then I've got an input that we're going to shake in just a second then I've got some very basic style none of this has anything to do with the actual animation is simply just to set it up so it looks a little bit something like this then I'm loading myself in latest version of jQuery just so that when we get to adding it with jQuery we'll be able to do so so very basic use of using animate CSS is simply just adding CSS class names so you don't even need to be using jQuery if you really want the base use the way that works is you first you give it to class the first one is animated and the second one is the actual name of the animation that you're looking for so we look somewhere in here you could choose rubberband or swing I'm a big fan of shake so we're going to go ahead with that so shake give it a save and now when i refresh this button right here should shake there we go so you notice every time I hit the Refresh key it shakes so that's great but chances are you're not actually going to be using these animations on page load so we want to have a little bit more control over how this works so things you can do with just plain CSS is if we look at the documentation here on github this they show that we can change the the duration the delay in the iteration so let's go through each one of those right now and see how that works so I would apply this CSS to the element that's being animated so here has a class of button this is the one I'm animating so here here's where I'm going to do that I'll just paste that in there and you're going to notice that it says vendor that's just the vendor prefix on different browsers you're going to make sure that you need to put the vendor prefixes in there how you know what the vendor prefixes are great website you can go to can I use calm and just search your animation oh sorry it's keyframes and you'll be able to pick that up from here so it looks like you only need WebKit and fire and plain old you don't need MS you don't need IE so I'm going to I'm using Chrome right now so I'm going to use WebKit comment these out for now actually so I'll change that vendor to WebKit and I'll comment these two X you just want to work on duration duration is how long it actually takes so by default it's one second just the shake generally you want to put that something less than a second to get it a little bit there we go that's a little bit of a nicer animation wherever you can do something ridiculous like 30 seconds I'm not going to wait here all day or three seconds and it will go a little bit slower second one we have is the delay so maybe you're doing this on a header and you want your your header to swing in you can delay that so maybe you need two seconds or so for the page to load so now if I have this delay of 2 seconds refresh after 2 seconds it shakes a third one is iteration count so how many times does it shake by default it's one however you can make it maybe something like 4 you can see it go four times there or you could put it on infinite which would infinitely shake it if you really want to annoy your users so that's what those three do I'm not going to use any of those right now so I'm just going to comment those out what else I wanted to show you was kind of the more kind of the better use case for something like this would be adding and removing these classes with jQuery so this shake that we have here is great for when you're doing form validation and accidentally someone doesn't fill out the proper information it's great to draw attention to the input so how do we add it with jQuery so rather than add these classes of animate and Shaikh right in our HTML we're going to do it when something happens for example a click so I delete that I have this button here and I want to make this input shake when this button is clicked so what we would do is we go down to the bottom here we're writing your JavaScript let's give myself a document ready good and and then once the document is ready I'll say a dot button so let's grabbing the button on click function and then so once that button is clicked we are going to grab the input and I believe I gave that a name of first name dot add class and then we're just going to add those two classes we did before so animated and shake so again when I click the button it should grab the input and add a class of animated shake so refresh now when I click this you'll see that this input that now shakes great however if I click it again and again again it only doesn't want so I have to reload for that to happen and that's because if we look in our dev tools here and you can see the link in the input here watch this input when I click here see it adds a class of animated shake however if I do it again just going to add the class again and it's not going to reanimate itself so what we need to do is remove the class of animated and shake once the animation is done now you might think yeah ok that's great I'll use a timeout so maybe you say ok well this animation is 1 second I'll set a one second timeout' with JavaScript wait for it and then remove it however we can do one better and actually listen for the animation end event so if you take a look at the github docks here you'll note that they have these animations events here I'm just going to paste them right here so WebKit animation end models of animation and MSN etc etc this animation end event similar to click or hover or something like that fires when the animation is finished so what we can do is take these animation events and say dot one and I'll explain what that is in just second that's similar to on and I will paste those animations in there so when any of these animations or events happen comma run this chunk of code so when it's done I'm going to say this which are first to the input dot remove class animated and shake so when when the button has finished animating remove it remove these two classes we don't need them any longer so back up here let's refresh so now when I click it adds the class now I can click it again and it adds it so watch watch right here where the class goes on and off so on off on off great so that's pretty straightforward one other kind of improvement I like to do is rather than writing this out every single time same with this is animate shake if you change one of these two let's say bounce up then you'd have to also change this one to bounce up and it's going to get out of sync really quickly so kind of one optimization that I like to do is to say first of all store the animations in a variable so save our animation name equals and we'll use these guys and then we just instead of add class of the string we'll just pass it the variable and then we can replace that variable here so whenever we want to change the animation name we simply change it in the variable here rather than right side of our function we also want to do that for this huge slew of vendor prefixed events is too much to take care of so what I will call it is of our animation end equals all of those and then when we say one animation end it's going to just listen for all of these events at once depending on which browser you're in the reason why we use one instead of on is because one will actually only listen for the event once and that'll unbind itself which is great because every time you click it it's not going to bind over and over and over again so with these in variables let's double check that still works there we go shake shake shake great so hopefully that's a pretty good introduction to animate that CSS awesome library for adding interaction to your website and I hope you enjoy it thanks a lot

Channel: Wes Bos

Views: 351,772

Keywords: css, javascript, html5, animaition, css3, keyframes

Id: CBQGl6zokMs

Length: 11min 17sec (677 seconds)

Published: Thu Jun 05 2014