Now if a transition affects multiple CSS properties, you can define different easing curves for each property. So remember how when we used the transition property property, we were able to chain multiple values. Here we have transform background color and border radius. So you can do the same with the transition timing function. And if you have a comma separated value of different easing curves, each curve is going to correspond to the matching uh, CSS property in the transition property.

to correspond to the matching uh, CSS property in the transition property. So, ah, and you know what, I'm going to now delete these squares because they become a little bit of noise. So I'll keep the CSS so you can refer to it if you want to. But I will go in the HTML and I will comment out this section here. Okay, so now we can focus on our square. And at the moment, everything is easing in.

Okay, so now we can focus on our square. And at the moment, everything is easing in. So the rotation, the border radius and the color are all pretty smooth. But now let's go apply independent values to each. So if we have one value in the transition timing function, it's going to apply to all the values here. But if we have comma separated values, now the first one is going to be applied to the first one, the transform, the second one to the second one, and so on.

now the first one is going to be applied to the first one, the transform, the second one to the second one, and so on. So this will be pretty hard to tell apart. So why don't we go and grab the cubic besier function that we had created and try to apply this to the rotation, the transform properly. So we'll set the first value here to cubic beier. So now the rotation should start slow, then accelerate and finish slow. Let's take a look. Yep, it's doing the thing.

then accelerate and finish slow. Let's take a look. Yep, it's doing the thing. Alright, so let's try a different function I haven't even mentioned yet and it's called steps. You can think of steps as sort of a stop motion effect. So it's going to take a series of snapshots at a state in time in the transition and then jump from snapshot to snapshot. So if we had five steps, uh, and we need to specify end or start, this is just

So if we had five steps, uh, and we need to specify end or start, this is just to determine if the snapshots line up from the start or the ends of the transition. So with five steps and ends, it would make snapshots at 20%, 40, 60, 80 and a hundred. The last one being the end. And if we had start, it would start at 0, 20, 40, 60, 80. But here we're going to have five steps

And if we had start, it would start at 0, 20, 40, 60, 80. But here we're going to have five steps and I will copy this. And for the last value, which is the border radius, I'm going to have three steps and let's go take a look. But try to guess what's going to happen by reading this code. So the first uh, transition property, which is transform, will have the cubic beier animation like we've seen already. And then the second one, the background color

will have the cubic beier animation like we've seen already. And then the second one, the background color should have five steps. So the color is going to change five times abruptly and the border radius should change three times. So we should be able to notice them. If not, I will slow the animation right down. But let's take a look. All right, let's check it out. And I can clearly see the border radius steps 1, 2, 3, 4, 5, or 1, 2, 3.

And I can clearly see the border radius steps 1, 2, 3, 4, 5, or 1, 2, 3. It's a little bit harder to see the color change and maybe to really drive the point home of steps, let's also make the rotation follow a steps function instead of the cubic paia curve. So here, let's replace this with steps and let's go four steps and we'll go with start here. Alright, so now we should have four steps in the rotation, five steps in the color,

Alright, so now we should have four steps in the rotation, five steps in the color, and three steps in the border radius. This should be chaos, but let's take a look and yep, that's kinda working I guess. Alright, at this point I guess you get the hang of the transition timing function properly. Uh, let me wrap this lesson up by showing you another really cool tool. Uh, it's called Open Props by Adam Arga.

by showing you another really cool tool. Uh, it's called Open Props by Adam Arga. And it's a set of CSS variables as design tokens set for colors like this, gradients, shadows and lots of interesting stuff. But the reason I mentioned this here is because it also has easing curves. So you can see it's mapping the default keywords and then specifying values from one to five to give different strength.

and then specifying values from one to five to give different strength. Uh, and here you can see demos of what's uh, applied. So there's ease is in, uh, but then it gets a little bit more exciting because you have these fancy, uh, elastic versions or spring-like mappings. We have some bounce. So if you're in the lookout for inspiration of certain values, these are pretty cool. Uh, but if we try to work out what these consist of,

for inspiration of certain values, these are pretty cool. Uh, but if we try to work out what these consist of, let's go in the source directory and try to find the props that easing I guess. There you go. And like I mentioned before, cubic beier gives you the most control. And all of these are set with cubic Pease. So aha. Here are the spring versions and they using the linear function, which I guess lets you have more physics like, uh, behavior.

and they using the linear function, which I guess lets you have more physics like, uh, behavior. This is pretty advanced. But if you were to import the open props, you could use this CSS variable or here we can just try to steal that specific one and apply this to our rotation here. And let's now discover our springy rotation on a square. Don, don, Don, that is pretty nice. I really like that. So here's some information about it.

Don, don, Don, that is pretty nice. I really like that. So here's some information about it. It's newly available in all major browsers. And then again, if you want to figure out exactly how it works, you can go and do your research here. I'm telling you, CSS is pretty cool. All right, I think that's enough knowledge for this video. I will see you in the next one.