Create CSS Animations Easily With Animate.css | Brett Romero | Skillshare

Create CSS Animations Easily With Animate.css

Brett Romero, Bitesize Business School

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
2 Lessons (16m)
    • 1. Introduction To Animate.css

    • 2. Building Out Animations


About This Class

CSS animations make your website more engaging for visitors.  But getting these cool looking elements to work on your website can be a complicated task, especially for beginners.  With Animate.css, the complexity is removed.  In this course, you'll see how to any number of animations with only a few lines of code.


1. Introduction To Animate.css: CSS Animations ca NBI a very complex task, but with a single style sheet called animate dot CSS, you could do a large number of animations very quickly and very easily. Best of all, this is not a framework. It's just a single style sheet that you can implement quick and get up and running with animations to reach the enemy CSS website, Just go to Google and type in anime dot CSS, and it should be the first link that comes up and wouldn't click here. And you can see here and made out CSS. This is at dane den dot Get hub dot io slash animate got CSS. So as you can see, there's not much documentation right here. But if you click on the drop down, you can see the various kinds of animations available. These are actually the class names that you'll use to create the particular kinds of animations. So what we're going to do mostly is some of the balancing animation, some of the hovering effects. So, for example, if I select bounce and you can see what happens there, click the animate. But it would just show me again what's going on. I can do wobble. So it's just gonna tell you what all of these do, so it's pretty straightforward in that regard. To download it, click on the view on Get Hub or you can click on download animate CSS. I'm actually going to do this one that's gonna open up the CSS file, and from here I'll just highlight everything and copy. Then I'll switch over to my editor and start a new file, and I'm just gonna paste all the CSS into there and save. I want to say this as Animate di CSS and this is my project photo saw. Say the CSS file here, and I've got a new HTML file, which I'll just save inside of this folder as well. So now I can link to my animate that CSS file without having to worry about backing out into parent directories or anything like that. So the first thing I want to do is create a reference to the animate dot CSS files so that we actually can use these animations and right below title in the head section. I'm gonna create that reference so I'll do a link, and relationship is going to be style sheet and then I'll do an h ref to animate dot CSS. And now I've got a reference to the CSS style. She we're going to work now on building out our button and in the body section. I'm going to go ahead and start the button code. The first thing I want to do is created If I'm gonna call the day of submit button and I'll close that and I'll just put a closing deaf here and inside of this, Dev, I want to do an input so this all might go inside of a form. For example, I would just say type is submit and the value is submit and I'll close this tag so you can see here. Oh, we've got a cement button, which is not gonna do anything, but you can click on it. And now what I want to do is apply the animation code. So we have our reference to the animate dot CSS. The first thing I need to do is add a class that's gonna be called animated. Then I want to put the kind of animation that I need to do here or that I want to do here this is going to be about. So I just to balance and I'll close that. So there's our button. It is bouncing. I'm going to go ahead and reload this so we can see one more time what that does. And if I click it, nothing's happening. So that's the behavior you want to change. We want to be able to click it and have something happen to do that you actually need to implement with Jake Worry so that you can add the class, remove the class on the click of that. 2. Building Out Animations: to do anything with Jake or we're gonna need a J query library and we can get a reference to that from Google We don't actually need to download. The J. Corey Library will just reference the one that Google is already hosting. So if a flip back to the Web browser among Google here, you can type in Google. J Query Library should be the first link that comes up. And if you click that link going to hear and under available libraries, I'm gonna click Jake Worry and then just highlight this snippet right here and I'll copy and go back to my editor. From here, I can paste in the J. Corey Library. I wanted to be the 1st 1 by adding Ajay Kori Library as the first reference any other JavaScript related references that I adhere, or any script blocks that I adhere that require J Query will not break. They'll have their reference. If I added the J. Corey Library last, then any other JavaScript Ajay Kori, that depends on it on Ajay Kori library would not have the reference. No, I need to add some functions and I'm gonna add a function for the click event, so I'll start a script block and I'll just close this and the script lost. Gonna be here in the head. What I want to do is create a function for this animation on Click, so I'll just start off with a new function. I'll just call it Animate on Click and then I'll close my parameters there, you know, at an open brace, and then I do a close brace. I'm gonna build this function kind of slow and explain the different parts of it as it's being built out. So you can kind of understand, and I'll try to keep the formatting pretty good that you will build the sea where different things start cause there's gonna actually be functions inside of this function, so it might get a little complex, but I'll try and make it as simple as possible. What I need to do is pass in two parameters. These parameters were gonna be first, the element that I'm animating on in second, the kind of animation I want to use. So this is gonna allow me to do different kinds of animations by only changing the second parameter. So the first thing I want to do is the element that's being passed in, and I'll just call this element. And then I went to add something for the animation, so I'll just do animation. So that's my two parameters that I will use inside of this function. Now the elements gonna be passed in. I want to get a simple flight reference to it so I'll do element equals and I want to you, Sanjay Corey syntax here to get a reference to our element. And then on this element, I'm gonna add a click event. And inside of this click is going to be another function that's going to said a timing for the jumping of this button is gonna add. Also add are animated bounce classes to this element. So all those classes to be added whenever someone clicks on the button. Not before to do that, I'm going to at a function into the click event of this element, this element right now being this button that we have up here so I'll do click and in Click . I'm going to open Apprentice E and then I'll close this print, see soldiers closed down here and add a semi colon just tighten up for mining a little bit . So there's our click. And inside of there I'm going to add a function for adding our classes to this button because you can see here where we have class animated balance, that the class is already there. It's gonna balance when the page load. So we're preventing that by adding it when the user clicks so that the action occurs pretty much simultaneously and it looks like, uh, these classes were always on the button. But in fact, they're being added right whenever the user clicks. So now I'm going to create another function. This is gonna be parameter lis, and I'll open. And then I'll close this function right here and in the function. What I want is element add class, and in here I'm just going to put the name of these two classes that are going to be added . So we have animated and then we got a parameter that's coming in and this is actually animation, and then I can close that. So this is one statement inside of this function, this anonymous function, and now what I want is to do a time out, so I'm going to do window set time out and time on has two parameters. It's got a function which is gonna be what we want to do, and it's gonna have an interval is Well, so what I'm going to do is open this up and our function is gonna go here, and then I'm going to do a comma. And this is where our time is going to go for the time to thousands. Fine. And then I'll end this statement this time out statement by adding a semicolon. So let's talk about this function that we need to add as our first parameter inside of this function. We're going to remove the classes that we have added because again, we can't allow them just to sit on the page because, well, next time the user comes back, they're gonna click the button and add the classes again while they're already there. So we need to remove those classes. So to go over what we're doing here, we're adding the classes inside of this anonymous function when we're also setting a time out in our second statement that after two seconds, this function were about to add is gonna trigger inside of dysfunction. We're gonna add code that's going to remove these classes. So the instant the user clicks saw in the button, we add our animation classes. The animation goes after two seconds. We remove our classes because if we left those classes there the next time the user would click the button, we would add them again. And then when it weird to start, a pending in the syntax will get probably pretty messed up at that point. So we're removing them and leaving nothing on the button That way, there's not some straight balancing or anything going on. We're starting fresh with each click. So inside of a time out, we're going to go ahead and add our function, and it's just gonna be another anonymous function. I'll open my brace here and then right here, I'll go ahead and just close that. So this is the body of our function that I'm working on now. I'll do element so you can see we have element dot add class. Now we need an element diet, remove class and what we're removing, removing the classes we added above which we can use the same kind of syntax. Tony to space here so that there's a space between our classes and this is going to be again animation, and I need a semi colon. So now we've pretty much completed our code for this and to go through our animation on Click we passed in two parameters we have are button, and we have the kind of animation we get a cleaner reference to our, um, our element. And then we had a function inside of the click event, and inside of that function is going to do it at our classes, wait two seconds and remove them. That's all that's happening here to make this work. Of course, we're going to need a document ready. So I'll add that right here, the first part of our script that's going to be a document ready, and then we're going to open do another function here. No parameters. We can go ahead and close that function, and this is going to be ah parentheses E with cynical because we open right here. Now I can add the body of this and I'll get a reference to our button cement button. Now we'll iterated over our element here and add another function, and this is going to get it right over the element to execute our animation on Click. So I'm going to open the body of this function here and I'll close right there. And I need another parentheses because we opened with the parenthesis e. And then in here, I'm going to do animation on Click. I'll just pass in this and then I'll say, bounce. So this is going to be the actual button. That's where this is coming from. And then the animation name is balance. So down here I can go ahead and remove this class. I'll just remove that. And now if I refresh this browser page, we're not animating anymore. And if I click now, looks like there's an issue. So we should be getting our animation right here. But if I look at the function name and then I look at the name that were wiring up in our document ready, there's ah spelling issue as well for the J. Corey Labor. We need the http colon Now. If I try it, you could see we get our animation if you wanted to use this for different actions. Besides just the click for example, you can. All you have to do is change the kind of event. So say, for example, I want to do a hover. Now, if I hover over the button, I should see the animation and you can see there it is. And I might change this to on Hover. So I changed these references so that they would be on hover instead of on click. And that was a quick walk through of how to use animate dot CSS to get some easy and simplify CSS animations in Teter pages.