Let's take a look at a couple more animation properties, including one that can be quite confusing. All right, new example. This time you get four squares instead of one. And I'm going to play the animation. It's not going to look great just yet, but this is the whole purpose and the properties we're going to add are going to help us here. So let's take a look.

to add are going to help us here. So let's take a look. And as you can see, nice fun animation. Uh, it's called Tara and the squares are TAing into the screen, but then they yank back to their original position. Let's take a look at it one more time, little rotation and then snap back in position. And just like in our previous example, the problem is that we start and end in a different position and then the animation just jumps back to the start.

that we start and end in a different position and then the animation just jumps back to the start. In this case, you can use a property called animation fill mode. Now this might be daunting and confusing, but basically it lets you decide what style should be applied before and after the execution of the animation. So if I scroll down, you can see the values are forwards backwards, none or both.

So if I scroll down, you can see the values are forwards backwards, none or both. Essentially backwards is what happens before the animation. And then forwards is what happens after the animation has finished. So if you want to preserve the stars of the end of the animation, like in our case, well you can use animation film mode forwards. Let's try that. Alright, here's our Tara Key Frames animation.

Let's try that. Alright, here's our Tara Key Frames animation. I realize I haven't even showed that to you. We will go through that in a minute, but let's now where we consume this data animation at the animation field mode of forwards, and this well should keep the last key frame, the a hundred percent step here and keep these styles after the animation has finished. So you can already see that the squares are sitting in the

after the animation has finished. So you can already see that the squares are sitting in the end position, which means it works. And now when I refresh the page, it's going to run through the animation and then stay where they are at the end. Cool. Alright, before we continue, let me talk you through really quickly through the key frame steps. Uh, the 0% actually is not even needed because it's using a default value.

Uh, the 0% actually is not even needed because it's using a default value. So basically at 40% of the animation and holding to 60%, we are going to go to the right by 150 pixels, scale down to 80% and have a slight rotation. And then from 60 to a hundred percent, we maintain the translation, but we are going to rotate by 90 degrees and scale up. Now what's really interesting and sort of new here is this animation timing function sets

Now what's really interesting and sort of new here is this animation timing function sets inside the key frame step. Uh, if I go up here, the animation itself has the ease in out setting, but we can override this for a given step to step, uh, progression inside the key frame animation. So hereby setting it at the 60th key frame, basically between 60 and a hundred percent, the animation timing function will override

between 60 and a hundred percent, the animation timing function will override what we have up here and use this cubic beier curve instead. So this one kind of overshoots and has this elastic bouncy effect. So I want you to focus on the square after it has translated to the right. And I want you to see while it's rotating the sort of, uh, animation timing function that is applied. All right, let's check it out. And as you can see, there is

animation timing function that is applied. All right, let's check it out. And as you can see, there is that bouncy uh, over rotation of the square at the end, uh, because we have overridden, the default is in out, uh, I think transition timing function that we've applied to the whole animation. So if you want specific easing curves between specific steps, this is how you can do it. Alright, so back to the animation film mode. By the way, you can also inline this

Alright, so back to the animation film mode. By the way, you can also inline this with the shorthand animation. So I could have it like this and this would be exactly the same. Okay, if we look at the markup for the squares, you can see that each square has its own modifier, 1, 2, 3, and four. And so we're going to introduce a little delay for each square. So square one can remain the same with no delay,

delay for each square. So square one can remain the same with no delay, but then square dash dash two will have an animation delay, new property for you of 100 milliseconds. And then co-pilot should understand what we're trying to do and complete the sequence. Yes, yes, yes. Perfect. Thank you very much. So now we should have a nice little staggered animation where the first square is going to animate straightaway. Square two is going to wait 0.1 second

where the first square is going to animate straightaway. Square two is going to wait 0.1 second before starting the Tata animation. Square three waits 200 milliseconds and square four, 300 milliseconds. All right, so this should look pretty cool and I like it. Very nice. Uh, let's now change the animation direction to be reverse. So up here I'm going to add reverse. And so let's play the animation.

So up here I'm going to add reverse. And so let's play the animation. And as you can see, uh, it's playing in reverse now and it sort of looks good, except that the starting position is now the end destination of the animation. So there is that glitchy jump at the start of the animation. Typically, in that case, we would want to change the animation fill mode to backwards. So now when I refresh the page, the square should all start

to change the animation fill mode to backwards. So now when I refresh the page, the square should all start to the right, the a hundred percent key frame, which is the first frame of the animation in reverse. So let's take a look and yep, they all start and then move to the final position. So like I said, animation film mode is sort of weird to wrap your head around. Hopefully that made sense. I wanna give a big shout out to Josh Cuomo.

Hopefully that made sense. I wanna give a big shout out to Josh Cuomo. He's exceptionally good at explaining concepts visually. He has a great article on key frame animations. That's a great read. But what I wanna show you here is the chapter on fill modes, because there are some really good visuals that explain what the animation duration does and the fill mode properly. So maybe that's gonna help you click visually. As you can see here with forwards,

So maybe that's gonna help you click visually. As you can see here with forwards, the final value is persisted going forwards. And then when you introduce a delay, you might not have the outcome that you want. So I thought these illustrations were really good. So once again, shout out to Josh. Alright. I think at this stage you should have plenty enough knowledge and skills to be creative and productive with CSS key frame animations.

knowledge and skills to be creative and productive with CSS key frame animations. So make sure you go and play and try build some animations and have some fun. I will see you in the next video.