1.4 Animate.css

Welcome back to the course. In this lesson you'll learn how to add animations and transitions using Animate.css. This is a fantastic library created by Dan Eden and it's been around for quite some time now. So let's see how it all works. If you go to this GitHub page, you'll find a link in the lesson notes. You'll see a preview of what you can do with Animate.css. Basically you select your animation from this list, and you can see a preview right here. Pretty cool, right? Now to get started, we're gonna visit the official GitHub repository. And of course, you can get it via NPM or Yarn. Or you can get the version hosted on CDN, which is what I recommend. So let's grab this, and let's go to our project file. I'm just gonna paste it right here. In this project, I'm loading modern-normalize that I covered in the previous lesson as a reset. I'm gonna be doing this for the rest of the course. And then I just loaded Animate.css. And I'm loading my own minified version of the style.css file that I have here. In terms of markup, I just have a grid with two containers inside, which I'll use to demonstrate. This CSS library. So let's start with the following. I'm gonna create an h1 with a class of Animate.css. And to this, I'm gonna add the classes of animated, and then the name of the animation that I wanna use. Let's select for example, bounce. So now when I go back, You briefly saw the animation, let's go again. And that's it, you just start with the class of animated, and then you add the animation that you wanna use. Let's use flash, for example. There we go. Now this animation only runs once by default, but you can change that by adding specialized classes. Infinite will just run the animation indefinitely. And let's go back to bounce, See, so it just runs indefinitely. And you also have some classes to control the animation delay and the animation speed. So to control the delay, you would do delay- and the number of seconds, let's say 3 seconds for example. So now my animation will start three seconds after the page was loaded. And I can also do slow to reduce the speed of the animation, notice right now it's much much slower. Now you have some additional classes that you can use. Let me just show you, if you go to the official GitHub repository you can find the classes here. So for delay, you can go from 1 to 5 seconds using delay-, 1 second, 2 second, and so on. And for speed, you can use the classes of slow, slower, fast, and faster. And you can see the speed time right here. Now if you don't want to use these classes, you can control these properties via CSS directly. So for example, I can delete these classes just leave the animation class. And then in here, I can say h1.animated. I can set animation-duration, let's say 5 seconds. Let's say animation-delay 1 second. And animation-iteration-count, I'll set it to 2. So that means my animation will unfold over 5 seconds. It's gonna have 1 delay start from when I refresh my page. And it's gonna repeat two times. Let's go back. And let's do a refresh here. That was the delay. That was the animation duration. And here it goes the second time. And that's it. Now it's gonna stop. Now these animations can also be added dynamically via JavaScript. So in the second container, I'm gonna add an anchor tag with an ID of button, and with a class of button, and I'm just gonna say href. We don't really care about that. I'm gonna say Submit form. This is just a demo button that I've styled to look like this. So what I wanna do is when I click this button, I wanted to add an animation to it, I want it to shake, right? So very easy to do that, in my script.js. I'm gonna say the following var element document getElementById. And I'll reference the element with the class of button, or, excuse me, it's ById, so we'll use button there. And then I'm gonna say element, we're gonna add a click eventListener to it. And we're gonna create a function here. And inside, we'll start by adding the animation classes. So we'll say element classList add animated, and let's say shake. So let's see if that works. Click, and there it is. Now if I click it again, it's not shaking anymore because the animation ended. So if we want to restart the animation, we gotta remove that animated class and add it again. So we can do the following, element add EventListener animationand and then function. And we can say element classList to remove animated and shake. So this is what happens, when I click the button I add the animation class. And when that animation ends, I remove that class. So that when I click the button again, I can re-add the animation class, and the animation will be restarted. So now, I can click this button as many times as I want, and it's gonna just keep animating. And that wraps up this lesson about Animate.css. Very useful library and definitely a time saver. Now in the next lesson, you'll learn about the most popular CSS icon library out there, Font Awesome. I'm sure you've heard of it and maybe even used it. So I'll see you in the next lesson.