1.2 Creating Keyframes With CSS
In this lesson, I will highlight the properties associated with creating keyframed animations using CSS. You will learn how to control the properties being animated, the duration of your animations, and several other associated properties. Head over to CodePen, fork the starter pen, and follow along with me!
1.2 Creating Keyframes With CSS
[SOUND] Hello and welcome to Up and Running With CSS Keyframe Animations. In this lesson, we're going to talk about how to create animations in CSS using keyframes. A keyframe is basically just a keypoint in an animation. And with the keyframes property in CSS, we can define any number of key frames for a given animation and the best way to explain this is really just to show you. So I have a very simple HTML file opened up in CodePen, we have a div with a class of dots which is a container div for six separate divs with a class of dot. And these dots are what we're going to be working with in this particular lesson. So that's all we need to know about our HTML, we can now close that up and focus on our CSS. So we have a couple of rules here, one for our container, which is called dots which has a class of dots, and then our individual dots inside that, which each have a class of dot. Now you'll notice that the position here is set to relative, that's so we can move these items around using the top property which is what we're gonna be using in this particular lesson. Now I'm using the top property for the sake of brevity and for the sake of moving things along quickly. But keep in mind that these animations run more efficiently if you use CSS transforms instead of using things like the top left or right bottom positions. But again for the sake of brevity we're going to be using the top position in this course. So let's talk about our keyframes, the first thing we're going to do is define our keyframes using the @keyframes rule. And then we're gonna give this animation and name immediately following that and let's just call this myAnim for my animation. And notice that there are no spaces here, you can't include a space in that name. Now keep in mind that this keyframes rule and all of the animation properties that we're gonna talk about in this lesson are mostly all supported in modern browsers. And all modern versions of all browsers, at least all the major browsers. If you want to make these backwards compatible then you will need to use vendor prefixes but again for the sake of brevity we are not gonna cover those here. So inside our keyframes rule, we have defined our name and now inside the curly brackets we're gonna define our keyframes. So let's say we have our first keyframe at 0% which means at 0% of the way through the animation or at the very beginning of the animation, we want our objects to look a certain way. And here we're gonna define the top property and let set it to a value of negative 50 pixels, so we're gonna move our circle up 50 pixels at the very beginning of the animation. And then let's say we also want to change the background color to blue. Then, let's create another keyframe at 100%, where we're going to set our top property to positive 50 pixels and our background color to red. Now as you can see this animation is not happening yet because we haven't actually applied this animation to anything. We've just given it a name in order to create the animation in order to run the animation, we have to apply it to a specific rule and we're going to do that to this dot rule here. So after our last property, I must skip a couple of lines so we can read it a little bit better. And the way this is gonna look is we're going to call on the animation property, and we can include a number of different items here. Now there are a bunch of separate properties that we can look at but I'm going to focus only on the short hand property. With the short hand property, the first thing we need is the name of the animation which is myAnim, which is the name we gave to it in our keyframes roll. And then the only other property we need to add here is the duration of the animation, how long we wanna to take if we wanna to take two seconds we would say 2s. And then we can put a semicolon there and watch our animation take place. And sure enough we see it move from top to bottom as it changes color from red to blue our I'm sorry from blue to red. The next thing we can add here, is an easing function and by default that easing function is set to a value of ease. We also have ease-in where it starts off slowly and then speeds up throughout the animation. We have easy-out where it starts off quickly and slows down towards the end. And then we have ease-in-out which is very similar to ease where it starts off slowly, speeds up, and then slows down again towards the end. If you don't want any slowing down and speeding up, you can set it to a value of linear and it will move at a constant rate of speed throughout the entire animation. I'm gonna set that back to a value of ease-in-out. The next property we can look at is the Animation Delay and again this is gonna be in seconds. Let's set it to a value of 2s or two seconds as well. When we do this, there is a two second pause before the animation starts, and while it's paused, we see the gray dots appear on the screen. And after two seconds those gray dots start animating, they jump up to the top and turn blue as they start animating down. So we have our duration, our easing function, well first we have a name, then duration, easing function and delay. After the delay we have an iteration count by default that iteration count is set to one and that's the number of times that we run through the animation. If we set it to two by just typing in the number 2 here, then we can watch the animation and it's going to run through twice and then it will stop after two iterations. If we want it to animate infinitely, we can change it to a value of infinite and it will just animate over and over. Which brings us to our next rule or next property which is animation direction by default. It's set to a value of normal which means it starts at 0% and moves forward till it gets to 100%. We can set it to to a value of reverse, which means it's just gonna go in the opposite direction when our page refreshes we notice it starts at red at the bottom and then moves upward. So it's now going in the opposite direction. Having another value called alternate, which means it's gonna go from zero to one hundred and then back to zero and it's just going to keep alternating back and forth over and over again. We also have alternate-reverse which does the exact same thing except it starts at the end. It starts at 100%, goes to 0, and then starts alternating back and forth. And so those are a few different values we have for the direction of the animation. For now let's just set that back to normal. And then finally, we have what's called the animation fill mode. And by default, it's set to a value of normal as well. So we have two normals right next to each other. But what that means is before the animation starts, if there's a delay before the animation, before it starts we're just going to see it in its normal state where we have these gray bars here. And then once the animation starts, they're going to jump up to however they look, at 0%. Now we can change that, by changing this value here. So instead of normal, we could set it to a value of backwards. And when we do that when the page first loads, those items jump up to the top and turn blue at the very beginning as soon as the page loads. And so basically what that's doing is it setting our items to whatever this value is here at 0%. So if there's a delay before the animation instead of seeing those, gray circles for two seconds, we'll actually see this particular rule here for two seconds before the animation starts. We can also set it to a value, well first of all let me show you, if we set it to let's say a value of two instead of infinite and when the page reloads, we'll see it animate through twice. And then at the end it jumps back to the beginning, or the default state as we have it defined up here. But if we set this to a value of forwards, then after that animates twice, you'll notice that it's going to stay in its ending location. So when we said it to forwards, it's gonna to stay as it is at the end. Now, if we set this instead to both then it's going to treat it as though we applied both backwards and forwards to the animation. So at the very beginning if there's a delay, it's going to stay at 0% for those two seconds and then after the animation is done, it's going to stay at 100%. So now that we have a good idea of how this works, let's create our final animation. I'm gonna create a few different keyframes here and at first we're going to start at the top and at first at the top we're just going to set it to a value of zero pixels. And instead of changing the background color, I'm gonna change the opacity and set it to 1. So at the top, it's going to start at a value of one so it will be fully visible. Then, let's go and just copy that and I'm gonna delete this 100 for now because it's going to be a little bit easier to copy and paste what we have here for the zero. So I'm gonna copy that and I'm gonna paste it one, oops, lets hit Enter first and paste it one, two, three, four times. And so for this first one, I'm gonna set it to 25% our second one or third one I should say 50%, the next one 75% and then finally 100%. So at 25% of the way through the animation. I'm gonna set the top value here to let's say 20 pixels and we're gonna set the opacity to a value of .5. We're never gonna bring it down to 0 which can bring it down to .5. Then at 50% we're gonna set top back to 0 and our opacity back to 1. At 70%, I'm gonna bring our top up to a value of -20 pixels. And then opacity of .5 and then at 100 will go back to the original position where the top is at 0 and opacity is that 1. So now, let's change the animation itself we have My Animation running. It's going to take two seconds to run all the way through it through all of these keyframes. We're going to leave it at ease-in-out and I'm going to turn off the delay. I don't want to delay here and I'm going to change this to here to infinite, I want it to run over and over again. And we don't need to worry about the direction because it's already going backwards and forwards. And so, I want to take normal off and I'm going to take both off. We don't need to worry about the fill property either. So now we've got it animating over and over again and I wanna do something else to make it look a little more interesting. And this is something you could kind of use for a loading animation for example, and what I'm gonna do here is if we set our delay, which we don't have a delay set here, but if we set our delays. To a positive number then when the page first loads that item is going to just stay in its initial position for however long that delay is and then it's gonna start moving. If we want it to start moving immediately but we want it to start at a different point in the animation then we would just give it a negative delay. And for the sake of brevity, I'm just going to copy and paste the rest of our CSS rules here and then I'll explain them. So I'm gonna paste them here and what I'm doing here is I'm leaving the first dot alone. I'm letting it do its thing, it's going to stay just like it is. But we can already see the animation occurring over here just kind of serpentine a little bit, that's every one of these is delayed. So we can look at our rule and you can see that each one of these has a negative delay so that all of these dots will immediately start animating. But they're going to start animating at a different point in that animation and so as you can see each one of these is .05 seconds apart. So the first one starts at .05 seconds into the animation. The second one at .1 seconds etc., etc. And by creating a little bit of a staggering effect in that delay, we can see the effect that we're going for up here. So those are the basics of using CSS keyframes to create animations in your browser. And it's very easy to do and I hope that you find some creative ways to use this in your own work. Again my name is Craig Campbell, I wanna thank you for watching and I'll see you next time.