When we were using CSS Keyframe animations, we had an easy way to control exactly what's happening at every step of the animation, which felt a lot better than what we've seen with JavaScript here. But there's a good news, there is a way that is very similar to CSS Keyframe animations in JavaScript and it's called the Web animations API. Okay, we are going to pick up where we left things off with this example. Remember we used request animation frame

where we left things off with this example. Remember we used request animation frame and we made the square turn 360 degrees and then stop. And I'm going to aggressively delete everything except our square variable definition here because we still want to target the square. So let's use that square and wouldn't it be nice if we could animate that square by saying, I don't know, dot animate and well, I've got good news for you

by saying, I don't know, dot animate and well, I've got good news for you because this is totally a thing. Dot animate is a function that will feel very similar to key frame animations. It takes a series of key frames and also receives, as you can see here, options. So we could pass these directly here in the animate code, but for clarity, let's define them separately. So let's define cons, key frames

but for clarity, let's define them separately. So let's define cons, key frames and we'll set this to an array. And what's gonna go in here is the equivalent of what you would put in CSS key frames. So we want to define for each key frame a set of CSS properties and what value or state they should be in. So let's start with an object for the first key frame and we will target the transform properly. And because we are in JavaScript, we want a string value.

and we will target the transform properly. And because we are in JavaScript, we want a string value. So we want translate X 100 pixels. All right, let's create a second key frame where we are going to keep translate X 100 pixels and add translate Y 100 pixels as well. And let's add a couple more. So the third one is going to be translate YA hundred pixels but translate X back to zero. And finally for the last one,

but translate X back to zero. And finally for the last one, we will have both values set to zero. So with a bit of imagination you can see that our square is going to go right by a hundred pixels. Then down, then left and then back up. As you might notice, there is no from two or a hundred percent, 50% uh, mention in these key frames definition, but as I'll show you in a little bit, there are ways

mention in these key frames definition, but as I'll show you in a little bit, there are ways to tweak that to your needs. So we've got our key frames defined and let's set some very basic options. So accounts options, and all we'll do is duration two seconds or 2000 milliseconds. So we grab the square from the do we define key frames and options and we animate the square

So we grab the square from the do we define key frames and options and we animate the square with set key frame and set options. Let's go take a peek in the browser. Okay, so let me refresh the page and whoops, it looks like the first key frame jumped straight to a hundred pixels. As you can see here, it makes sense because our first key frame here is at translate X 100 pixels.

because our first key frame here is at translate X 100 pixels. So I feel like we need to duplicate the last key frame and set it first. And now we should have a full rotation and we do over two seconds. I want the square to rotate more than once. Uh, so maybe in the options here, let's add repeat. Uh three. Hey, I've got a secret. I've made a mistake on purpose just

Uh three. Hey, I've got a secret. I've made a mistake on purpose just to make you like type script a little bit more. All right, so let's pretend we think it's going to work and rotate three times, but only once. Let me show you why the second argument, the options here that we pass to the animate function is typed as a key frame animation options. So let's try to add a little type annotation here. Key frame animation options

So let's try to add a little type annotation here. Key frame animation options and aha, instantly look at this, we get red squigglies and it's telling us that the property repeats doesn't exist on uh, the key frame animation options. So that's already useful. But what's really useful is that if we delete this and I press controlled space, it's going to suggest to me every possible option in these key

and I press controlled space, it's going to suggest to me every possible option in these key frame animation options. And as you can see, iterations sounds like what we need. So let's try that out. Iterations three and let's refresh the page. And this time I'm hoping that one yes, two and obviously three and stop. Uh, we are now honoring the amount of iterations for the animation to run over two seconds every time.

Uh, we are now honoring the amount of iterations for the animation to run over two seconds every time. Okay, so let's change the iterations counts to the keyword infinity, which will run forever. And I promise you that there was a way to define what percentage of the animation these elements should be. So these, for example should be 0%, 25, 50, 75 and a hundred like copilot worked out. But what if we wanted this one to be 40% instead then this one 50

But what if we wanted this one to be 40% instead then this one 50 and then this one 90% and then a hundred percent. Okay, so check this out. In each key frame we can define any CSS properties that we wanted. We are always doing just one here, but we could have border solid eight pixels black. And so now surprise, surprise, a eight pixel blackboard would appear at the second key frame and then animate back out.

a eight pixel blackboard would appear at the second key frame and then animate back out. But we can also pass a sort of magic value called offset. This is not a CSS property, but how much you want to offset the key frame from the total progression. So if here I go 0.4, that is hinting to the 40% of the progression check what happens? Okay, can you notice

to the 40% of the progression check what happens? Okay, can you notice that the square goes much slower from key frame zero to the second key frame because now we are using 40% of the whole two seconds to perform this. So let's remove the silly border and tweak a few offsets on other key frames. So I'll get rid of that here and let's try to add an offset of 0.9 for the 90%.

So I'll get rid of that here and let's try to add an offset of 0.9 for the 90%. Let's set 0.5 on the middle one. Oops, we gotta say offset. And so now I think it's going to go slowly from the first key frame to the second and then really fast to the 0.5 and then slowly and really fast. All right? And yep, it looks like that's what's happening. Uh, now we have a really fast progression from 40 to 50% and 90% to a hundred.

Uh, now we have a really fast progression from 40 to 50% and 90% to a hundred. Okay, let's get rid of these offset values. Now that you understand how that work. And I also want to remove these silly comments here. So now we are back to a uh, linear rotation of the square, but let me show you how you can change the easing timing function as well. So that clearly happens in the options. As you can see, it literally guessed

So that clearly happens in the options. As you can see, it literally guessed what the next thing should be. And we can go easing here and use any of our CSS transition timing functions. So let's try ease in out. So it should start slowly accelerate through the middle and then slow down at the end. And indeed it's happening 1, 2, 3, 4. Now, if you wanted to change the transition timing function

And indeed it's happening 1, 2, 3, 4. Now, if you wanted to change the transition timing function from one specific key frame to the next, you can also pass here the easing. And here let's go ease in out as well. So now it should ease in out between these two key frames, but also between the entire set of key frames. And so now if you pay close attention, yep, I can see it. The first movement from top left to top right has that ease in out animation

The first movement from top left to top right has that ease in out animation and then it goes into the global is in out, let's maybe slow down the duration or make the duration longer so we can see it a bit better. I'll change this to five seconds here. And so now you should clearly see the square slow down before it goes down. Uh, watch it one more time. It slows right down before it starts going down,

Uh, watch it one more time. It slows right down before it starts going down, but then it's got that continuous, uh, global ease in out animation. And I guess if we did something radical like for the third key frame, we went easing steps three to have three stop motion steps, this should now be super clear that the bottom section is going to follow the steps. Okay? The animation function is pretty cool, I guess,

that the bottom section is going to follow the steps. Okay? The animation function is pretty cool, I guess, but why would you use something like this when you can do the same with CSS? Well, that is the topic of our next lesson.