2.1 Understanding CSS Animation

Hi, and welcome to CSS animation in the real world. I'm your instructor, Cory Simmons. And in this lesson, we'll learn what constitutes a CSS animation, and a few different ways to create CSS animations. First, I'd like to explain that there are two different types of ways that you can create CSS animations. There's the transition technique, where we just transition from one state to another. And then there's the keyframes technique, where we can set as many keyframes as we want. We'll go over both of these techniques in this lesson just to make sure that you have a firm grasp of what they are. So the first thing I wanna do is go ahead and set up our project base. So, what we're gonna do is we're gonna use a pre-processor that I like called stylus to use something called autoprefixer with it. It's probably the easiest way to get autoprefixer working. And we'll need autoprefixer later whenever we get into using keyframe animations to avoid having to write out like hundreds of different vendor prefixes. So let's go ahead and create a new folder. And we'll just call it Understanding CSS Animations. And we'll pull this into Sublime Text. And now, let's create a new file called index.html, and just add some HTML boilerplate into it. And what I'm using now, the Emmet plugin here. So I can just type exclamation mark and hit Tab. And it'll expand out some generic HTML boilerplate. So let's just name this Understanding CSS Animations. And we'll go ahead and add an h1 to it called Hello Stylus. Let's save that. And now, let's create a new folder called CSS. And inside of this folder, let's create a new file called style.styl. Now, Stylus as a pre-processor is really flexible. So if you just wanna go ahead and use and again, if you're used to using CSS syntax, you can do that. So we can just say, you know, foo, and you can keep using curly braces and say, background: red. And you can use your semicolons, whatever you wanna do. Or if you want to or if you're familiar with Stylus or Sass' indentation syntax. Then we just get rid of these curly braces, and we can even get rid of the semicolon. We can get rid of the colon itself, but I kinda like it just to keep the, the property and the value separated. So we'll leave that in there. And we'll actually change this foo to h1, so that we can actually see it working on our h1 over here. So if you don't have Stylus, what we need to do is open up Chrome. Go to nodejs.org, and click the Install button here, and just run through the installer. It's really simple, and once you do that, we'll have something called called npm on your on your Terminal. So, open up Terminal. Type in the npm, which is node package manager. And we'll say, install -g stylus, and autoprefixer-stylus. And hit Enter. [BLANK_AUDIO] Okay. Once we have that we can cd into our Desktop folder. And, and then into our Understanding CSS Animations folder. And once we're in there, we can cd into our CSS folder. And now, we can run stylus -u autoprefixer-stylus, and then we just wanna watch that style.styl file. So what that'll do is it'll compile the style, the Stylus file here into CSS. So now, we need to link that CSS file there. Since HTML can't read Stylus. We'll say, css/style.css. Save that, open that up in our browser, and you should have a red background on your h1 now. So the first animation I wanna show you is animating with transitions. So, we can take this Hello Animations, h1. And we can say, transition: all 400ms ease. And we can then, during the hover state, we can change the background to blue. So now, whenever we hover over that element it should transition from red to blue. So let's refresh, hover over it. You can see over the duration of 400 milliseconds, the transitions. So that in and of itself is an animations, animating from red to blue. Now the, the syntax for this, if we'll just go Google mbn css animation or transition. And we'll open the second link here. [BLANK_AUDIO] So the first parameter it takes is transition-delay. Actually the first parameter it takes is the transition-property. And then time, and timing-function, and time. So the first parameter is transition-property, which is all. The second parameter is transition-duration, which we've set to 400 milliseconds. You can also specify it in seconds. And then the the timing-function or the ease in type that we wanna use, we just use ease. So come back over here. And now, let's make this block a little bit smaller. So we'll say, display: inline-block. Actually, I think we can just say, width: 200px. Save it, refresh. Okay, now, so now, let's let's animate something else with it so we can see what this all is actually doing. So we can animate either, you know, background, or we can animate, you know, other things. But we'll just say all, we'll say, background: blue, margin-left: 300px. So now, if we save it and refresh and hover over it, it animates in the margin-left: 300px. [BLANK_AUDIO] It's cool. So that's transition animation in a nutshell. It's really good for like hover states and various states that you can apply. Or if like you're just animating from one position to another position, it's great for that. It's not so great whenever you wanna animate from, you know, say we wanted this block to animate over there to the right some, and then down, and then left, and then back up. It can't really do that. So what we'd need to do is use keyframes. So if you're used to using Flash or if you're used, or if you've used After Effects or anything like that. That has like a timeline where you can set different keyframes, it's very similar to that. Basically in CSS, you'd say like 0%, you know, at the 0% timing marker, I want to have this block over there in the top left. At 25%, I wanna put it in the top right. At 50%, I wanna put it in the bottom right. And at 100, or at 75%, I wanna put it in the bottom left. And at 100%, I wanna start it back where it was. So let's go ahead and create that animation now. So we'll come down here and if you notice, I use this ampersand here. Which basically, if you're used to using CSS, it just means we're appending whatever this value is to the h1. So we're saying, h1:hover and then, you know, all of our properties and rules there. So, we can do that again. And we'll, we'll come down here and just say keyframes. And this is how you create a keyframe animation. So we'll say, slideAround is the name of our keyframe animation. So here, we'll say 0%, we want the margin-left to be 0, and the margin-top to be 0. And if you're using just pure CSS, you'd say, keyframes slideAround. And then curly braces 0% curly braces 25% curly braces, and you just keep doing that, and there'll be curly braces everywhere. But since we're using Stylus, we can just dodge all those. So, say 25% margin-left, and we'll say 50px. And margin-top, still 0. At 50%, we want the margin-left to be 50px again. And now, we want the margin-top to be 50px. So right now, it will go from 0% over here on the top-left, over 50px, then down 50px. And then if we just left it like this, it would just return back up to the top-left, like in a diagonal shape. Well, let's go ahead and add 75%. And say, margin-left is now 0, to pull the block back over to the left, margin-top is still 50px. So we can keep it down there with the, you know, on that bottom line. And now, whenever we get to 100%, we're gonna say margin-left is 0, or yeah, and the margin-top is 0. So now, if we save that, refresh, and hover over it. It's still not doing, it's still doing the original animation. So that's because we have to specify the slideAround animation up here. So let's go ahead and get rid of both of these. And we'll say, animation: slideAround 3s. Let's now refresh, hover over it. [BLANK_AUDIO] Pretty cool. And whereas in h1, it all ready has some margin-top on it, so we'll go ahead and get rid of that up here. Save, refresh, and now it's working as we'd expect. Now, to make this keep going around, we can say infinite. Refresh, hover over it. [BLANK_AUDIO] Pretty cool. So, in mdn css animation. [BLANK_AUDIO] And then click on Syntax. And now, we can see the syntax of the animation role that we've applied here. So the name, the time, timing function, which is like you're easing time again, the iteration count the direction. So if we want to go into reverse, we could reverse it, or we could say forward to make it go forward. The fill-mode and the play-state. So you can get more information on the use right up here. You can get some examples of them, but usually, we'll just use something like this. Like slideAround for 3s, like the name of it, or how long it is, and if we want it to be infinite, or if we don't want it to be infinite. So in this lesson, we learned the basics of CSS animation. Two different techniques for making CSS animations. And in our next lesson, we'll learn about how to apply the transition technique to buttons. So stay tuned.