So I'm going to delete these individual animation properties and instead we'll use the animation shorthand. So let's move in one second. Yeah, let's go easy out and we'll accept that. And you'll see this infinite word here, which is the iteration count. So we had four, but if he wants to run forever, you can use the infinite keyword. So with that setup, the square is going to move from zero to 300 pixels and back and it'll never stop doing so.

So with that setup, the square is going to move from zero to 300 pixels and back and it'll never stop doing so. And so now the animation will run forever. And as you can see, each iteration is one second long, so forwards and then backwards count as one each. Alright, so let's delve in the key frames here. The first thing you need to know is from, and two is syntactic sugar for the 0% step or the very first step and a hundred percent step. So this is going to be exactly the same.

or the very first step and a hundred percent step. So this is going to be exactly the same. Next, the key frames will infer default values. So basically transform translate X zero is the default behavior in CSS. If you don't translate anything, it starts at zero. And so we could omit the 0% or from key frame and just say at the last key frame, you have moved 300 pixels to the right and that should still work exactly the same.

you have moved 300 pixels to the right and that should still work exactly the same. And yep, seems to be working the same. Okay, so as you can imagine, if you have 0% and a hundred percent steps, you probably have all the other percentage steps as well. And this is where things get interesting. So let's bring back the 0% step even if we don't need to, just for clarity I guess. And now I'm going to add a 50% step halfway through.

just for clarity I guess. And now I'm going to add a 50% step halfway through. And here let's go transform translate X, not one 50, 'cause we won't really see that, but 500 pixels. So if you think about it, this square should overshoot to 500 and then come back to 300. And because it has the alternates direction, it's gonna go back to 500 and then back to zero. Alright, now we're getting something interesting. And to avoid confusion, I'm going

Alright, now we're getting something interesting. And to avoid confusion, I'm going to remove the alternates uh, direction. We're just gonna go normal or forwards and we will adjust our key frames accordingly. Okay, so I will remove the alternate here. And so we back to the situation where a square jumps back to the initial position, but we're going to change the animation. So let's not worry about this.

but we're going to change the animation. So let's not worry about this. Alright, let's try something else. At the zero step, we'll start at zero then at 25%, let's go to the right by 300 pixels at 50% we will stay to the right by 300 pixels. But let's also go translate. Why 200 pixels then at 75%, I feel like copilot will understand what I'm trying to do.

Why 200 pixels then at 75%, I feel like copilot will understand what I'm trying to do. And yes, of course it does. We wanna stay lower by 200 pixels, but come back to the left. And finally at the hundred percent the last key frame, we want to go back to zero, both on X and Y axis. And alright, it works. It's going a little bit fast, so let's extend the duration a bit.

It's going a little bit fast, so let's extend the duration a bit. I'm gonna go here and make it over three seconds. All right, very nice. And as you can see now, because we start and end in the very same position, we don't need to use the direction alternates to make it feel smooth. It just completes the loop by itself. Super cool. Let's add a few more layers of animation on top of it. So maybe at 25% I will go scale 0.8.

Let's add a few more layers of animation on top of it. So maybe at 25% I will go scale 0.8. And let me copy this because we are going to remain at this scale at the halfway mark at 50%, and then at 75%, we are actually going to grow, uh, to 1.1. And actually, you know what? Let's be more drastic. I don't think we're gonna see it. So let's go 0.5, 0.5, and 1.5.

I don't think we're gonna see it. So let's go 0.5, 0.5, and 1.5. And let's add a rotation on the last bit. So here, rotate by 90 degrees. And so for the rotation, I believe here because it's not specified anywhere else, it's going to be rotate zero all the way to the 75th percent. And so the 90 degree rotation will happen only between 75 and a hundred percent. All right, let's take a look. And yep,

between 75 and a hundred percent. All right, let's take a look. And yep, the rotation happens just at the end. So you can see that it's scaling up and down and rotating at the end. So that would be completely impossible to do with just CSS transitions. But now with key frames, we can completely control what happens from A to B and everything in between. The last thing I wanna show you

what happens from A to B and everything in between. The last thing I wanna show you with key frames is you can define multiple steps separated by commas. So here instead of 50%, if I had 40% comma, 60%, I have now created a range where between 40% and 60% of the animation. So for a 20% duration of the animation, the values will be exactly the same. And so it's sort of like a freeze frame where we are going

the values will be exactly the same. And so it's sort of like a freeze frame where we are going to hold the animation to this exact state between 40 and 60%. So now the square is going to accelerate to that 40% step here and then post to 60% and resume. And so you can see that from 25 to 40, it goes faster and then fast again, and then goes back to the normal rhythm. Now I said it created a range here

and then goes back to the normal rhythm. Now I said it created a range here because there's nothing in between these two. But if I added also 80% here, this is not going to maintain the stars here between 60 and 80% because we have specified otherwise at 75%. So what's gonna happen here is from 40 to 60, because there are no other steps defined, it's going to hold these values, then it's going to go to the 75% value and then sprint back to the 80% value back here

to hold these values, then it's going to go to the 75% value and then sprint back to the 80% value back here and then to the 80%. Okay, so this might actually look a bit crazy. It does indeed. So you can see that after the 60% it goes to the 75 and then yanks back back to the 80 and then to the a hundred percent. So you have complete control. And as you can imagine, these key frames animation are

So you have complete control. And as you can imagine, these key frames animation are extremely powerful. We just barely scratching the surface. And if you can think of any sort of motion and sequence, you can probably codify it with key frame steps. So that is very, very powerful. It opens up a whole lot of possibilities. I just want to talk about two more properties

It opens up a whole lot of possibilities. I just want to talk about two more properties and we'll do that in the next lesson.