CSS Keyframes

[00:00:00]
>> All right, awesome. So let's move to the other big topic, we're going from 0 to 60 now because we're gonna be talking about animations using CSS keyframes. So to do this, you're going to go to keyframe animations, you're basically going to see the same thing over here.

[00:00:17]
But now we're not going to be talking about transitions between states, but rather explicitly defining animations just for different elements. So to describe this, you know what, let me get rid of [LAUGH] that big animation I have over there. Again, this is an anti pattern you don't want to be changing the height of the font size, or the font size, it's not height.

[00:00:44]
Animations are different than transitions because animations explicitly defined what happens between state A and state B? So instead of just saying, go just between those states, whatever properties are changed, we're going to find a smooth way to animate between one and two. You could actually define exactly what happens between those states.

[00:01:06]
So let's take the ball as an example. Let's say that we want for it to move around, so this is just a very basic example. What I'm going to do is I'm going to remove all of the transition stuff in there, and we are going to add an animation.

[00:01:25]
So this is going to be animation, let's call it, move-like-a-square, very, very, random animation name. And so this is going to be our animation-name. And just like a transition, we are going to give it a duration. So transition-duration, we're going to say that this happens over four seconds.

[00:01:56]
Sorry, this should be animation-duration, [COUGH]. Okay, so those are the two basic things we need to get started. Remember the default's timing function is going to be ease or ease announced, it's one of those two. So now that we provided an animation name, we have to define that animation.

[00:02:15]
And so the way you do that is by using CSS keyframes and then providing that name. So move-like-a-square. Okay, so CSS keyframes you could think of as a timeline at the very beginning, and this timeline is defined in percentages. So the very beginning is going to be 0%, the very end is going to be 100%.

[00:02:43]
So just like transitions, you could think of this as, we're defining many states along this timeline for our elements to transition to. So we could say that this might be transform: none. And that this 100% might be transform: translate x(). And let's say that we want to move this 20vw.

[00:03:10]
So 20, I guess you could think of it as 20% of the viewport width, so the width of the screen. Okay, so now let's see when we do this, you can see it's actually moving smoothly from here to there. And it doesn't really look like an animation, it's warranted over here, it looks like you could use a transition.

[00:03:31]
But remember, we're not changing states, we're just defining the animation so that it's gonna start pretty much immediately. Now, the cool thing about keyframes is that you could define points in between that timeline like what we talked about. So let's say that instead of this being 100%, this is going to be, I have to do some math.

[00:03:57]
So 1, okay so this is basically gonna be 33.3333%, and actually let's make it a smooth 25. So because this animation is four seconds long, this 25% mark is going to happen at 25% of four seconds which is one second later. So I'm going to move this over here.

[00:04:25]
And so now we're going to see that after one second, if I reload this, it's going to move over there. After four seconds, it is going to snap back and we're gonna talk about that in a minute. But notice over here we have the exact same definition for 25% and 100%.

[00:04:46]
So a shorthand for that is you could separate by comma, the other percentage marks of the keyframes so I could just put 25%, 100% over here. And so that's going to be the same thing as moving and then stopping there for the duration of the animation and then moving back.

[00:05:08]
So let's continue our square. We have 25%, we're moving to the right, 20vw and then at 50%, we are going to move translateY maybe, I want it to be a square I did say square. So 20vw, and then, let's see, that's gonna be translateY, but we do want to maintain the same translateX, so we're gonna put that here.

[00:05:39]
And at 75%, we're going to translate this back to 0, and we're going to keep that Y the same, and then at 100%, we are going to transform none. So we want to get rid of all the animation or sorry, all translation. So this is the same as doing this, having 0 translation for X and 0 translation for Y, but we're going to change that to none just as a shorthand.

[00:06:11]
So now let's see how it looks, Okay, it goes down to the left and back up. Now something that you might have noticed before, and just to clarify what's happening, let's make this overshoot a bit. So now, it will go like a square and then go really up, but notice that it snaps back.

[00:06:38]
So the reason that it snaps back is because of what's known as animation fill mode. So if we inspect this element, anyway, so that doesn't tell the full story. And neither of those computed values, but what's happening is that by default, we're not going to have a fill for the animation.

[00:07:00]
And what that means is that, at the 0% in 100%, so basically, when the animation starts and ends, we're basically saying wherever the element is naturally supposed to be, that's where it should be. So naturally the element is at 0, 0, so it's not translated anywhere, so when this animation is finished we're going to put that element back in its place.

[00:07:25]
Now if we don't want that, if we want this value to be sticky, then we are gonna have to add an animation fill mode, so animation fill mode. And so there's three possible values for this, there's forwards, backwards, and both. So let's do forwards first just to show you what that looks like.

[00:07:56]
It's gonna go back up here, and notice that it's actually sticking to the top this time. So this is just as we expect. Now let's add a delay to this so that we could demonstrate what backwards is. So animation-delay, 1 second, so now let's start the transform at translateX, -20vw.

[00:08:27]
So when we do this, it's going to start in its natural place and then sort of immediately go to its -20vw place and then start the animation. So that also might not look right, depending on what you want to do. So if we add, Animation fill mode backwards, then that will solve that problem because now we're saying, place this element at the start of the animation.

[00:08:57]
Okay, so now we have the reverse problem where it's not coming back, or it's not sticking to its final position. And that's why we have animation-fill-mode: both. And so what this is going to do, is it's going to make sure that it's sticky at the beginning, and at the very end.

[00:09:17]
So it's not going to snap back to its original position. All right, so we talked about animation name, duration, delay, fill mode. So now I'm gonna change a couple of things, we're gonna put transform none over here, And transform none over here. And let's say that I actually want this to just keep animating.

[00:09:45]
So we could have an animation, it's called iteration count, and you could give it a number where you could say, hey, I want this to happen five times. And so, it's not gonna do it here, so I had to do it here, animation-iteration-counts: 5. And let's actually make this a little bit faster just so you could see, we'll remove the delay as well.

[00:10:11]
So it's gonna happen basically five times, so that a second iteration, third, here's a fourth, and here's a fifth, and then it's going to stop. So if you want it to keep going, you could basically say that this should be infinite. And now this is gonna keep going, so this is a really great way to make loading spinners or things that just have to continuously animate.

[00:10:38]
Like I talked about in the fundamentals, it's important to keep in mind that the animation-duration is for a single iteration, it's not for the entire animation. Because the math wouldn't exactly work out there if you have an infinite animation iteration count, and only two seconds then things are gonna be really, really, really, really fast, so yeah.

[00:11:02]
And so there's another property too which you might not use to often, but it's really useful to know about, and that is animation-duration, sorry, direction. So animation-direction specifies when you have 0% and 100%, do you want us to go from 0% to 100%, or 100% to 0%? So if we do reverse, notice how now it's gonna go backwards.

[00:11:35]
And we could also do some really cool things. We could say, alternate. And so now at every other iteration, it's actually going to do the reverse of the animation. And, of course, you could even do alternate-reverse. So there's some pretty interesting things that you could do here. Additionally, what you could do is, you could specify the timing function for each keyframe.

[00:12:04]
And so this is a bit more of an advanced thing, but it's there if you need it. We could say animation-timing-function, let's just call this linear and see what that looks like. So now, notice that at the second leg over here, it's going very, very straight, it's a linear easing, it's not a nice smooth easing like the rest of these.

[00:12:29]
So basically at the 25% mark, it's going to take the linear timing function and apply that between 25% and 50%. So the final thing I wanna talk about here before we get to our exercise is, again, notice how both our 0% and 100% animations have transform none. We could group those together.

[00:12:56]
So we could say 0%, 100%, just like that. And also, there are some keywords for 0% and 100%. So 0%, you could call it from, and 100%, you could call it to. And so now it's going to work exactly the same. And actually, I'd add one more thing to talk about, you could have multiple animations on an element.

[00:13:27]
So we could say, Let's just call this red to green, and so we could have keyframes red to green, and let's just say this is from background red to background green. And so what's interesting is that these two animations are going to happen pretty much simultaneously. And the second animation, or the subsequent animations are not going to assume the same divisions as the first one.

[00:14:03]
So the red to green is not going to happen at 25%, 50% etc, it's going to be doing its own thing. And so one thing to keep in mind is that you cannot do this with the same property. So if red to green for whatever reason you added a transform over here, it's actually going to conflict with the original transform that you had.

[00:14:28]
So, it's just something to keep in mind. All right, any questions about keyframe animations in CSS?
>> So in that last example, will that override and cascade that style down with that second declaration of red to green? Will that transform take effect or will they just kind of cancel out?

[00:14:50]
>> Let's find out?
>> Let's find out. Okay, so we have both scale and, so it overrides the first one. Just because CSS is trying to determine at any given point of time, which style should we apply and because this one is defined second, it's going to take that one.