Let's now dive into CSS key frame animations, which give us a lot more control over what happens between the start and end state of animation. Once again, we're going to start with the basic square and let's jump into the code. All we've got so far is the style for the square. And so we are going to define our very first key frames. You can do so with an AT rule at key frames, and you need to give it a unique name. So let's go with move here.

and you need to give it a unique name. So let's go with move here. Let's try to move as square to the right by say 300 pixels for the animation. So we want to go from translate x zero to translate x 300 pixels within key frames. You can define specific CSS state at a given step in time. So we can go from, and here we wanna transform translate x zero. So this is our starting point.

and here we wanna transform translate x zero. So this is our starting point. And then we can go to and there transform translate X 300 pixels. So now we've defined c, s, s key frames, but we need to actually use them before anything happens. And for that we can use the animation properly, not transition, but animation. All right, so we could do this on hover, but let's do it on page load immediately.

All right, so we could do this on hover, but let's do it on page load immediately. So inside the square class here, I will define the animation property and set it to move. So we define key frames called move, and then we use them in the animation property for the square. Now if I take a look at it like this, nothing is going to happen. I'm refreshing the page and the square is not moving.

nothing is going to happen. I'm refreshing the page and the square is not moving. And the reason is, you know, the reason is we do not have any animation duration, so the duration is zero, and so no animation occurs. So here, just like for transition, I can add an animation duration of say one second and let's refresh the page once again. And aha, nice. You can see the square moves to the right by 300 pixels

And aha, nice. You can see the square moves to the right by 300 pixels and then comes back to its original position. That's not really impressive or better than transitions to this point, but let's keep going. The next thing I want to do is repeat the animation a few times so we can do animation iteration count. And let's go three here. So as you can imagine, the animation will

And let's go three here. So as you can imagine, the animation will now run three times. Let's check it out. One, two, and three. And we done. As you can see, because our animation starts and ends in different positions, there is this wheel jump that occurs between the animation iterations and also at the end. So there's a few way we could fix that. We could make an animation that starts

So there's a few way we could fix that. We could make an animation that starts and ends in the same position, but we can also use the animation direction properly to make the animation go forwards. And then backwards, check this out. Here's another animation property for you. Animation direction. And the default value for this property is normal. So the exact same is going to happen.

And the default value for this property is normal. So the exact same is going to happen. It goes from the start to the end and then keeps running. This way you can set the direction to reverse and imagine what's going to happen here when I refresh. Let's try. So you can see it starts at the end and goes to the start and it repeats three times. And now a really cool value for our use case where the animation starts and ends in different position is alternate.

where the animation starts and ends in different position is alternate. That's going to work really well. And let me change the iteration count to four. And so now the first iteration is going to go forward and then reverse, and then another time forward and reverse to have four iterations. Just like for transition, you can have animation timing functions, and the default is ease. But if we were going linear here,

functions, and the default is ease. But if we were going linear here, of course now the square would move in a linear fashion, which doesn't feel very natural, but sometimes is the right easing to use. There's a few more animation properties I want to discuss in future videos, but before that, let's talk about key frame steps.