There's a couple more CSS transition sub properties I want to talk about. So let's dive right into it. One property we haven't looked at yet is the transition delay. So right now if I hover over the square, we have this sort of Frankenstein animation that we've built over the lessons. But as you can see, as soon as I hover over it tech, the transition happens and as soon as I leave, it also happens instantly.

the transition happens and as soon as I leave, it also happens instantly. And so with transition delay, we can delay the start of this transition. And for simplicity, I will remove the transition timing function that makes the linear function and then the steps. So we have just the normal ease transition and that's mostly so our CSS is a little bit more compact. So I will now hear, add a transition delay

and that's mostly so our CSS is a little bit more compact. So I will now hear, add a transition delay and let's do uh, 500 milliseconds. As you probably can guess, this should delay the start of the transition by half a second. So let's hover and you can see half a second elapse out and start in and start pretty simple. Yeah. Okay. And there's one more transition property we haven't talked about.

And there's one more transition property we haven't talked about. It's called transition behavior, but we need a little bit more elaborate example to demonstrate it. So we are going to do this in the next lesson. What I wanna do here and now is show you that you can combine all these properties with just the transition CSS property

that you can combine all these properties with just the transition CSS property and you can pass multiple parameters instead of having individual property name, duration, delay, transition, timing, function, and so on. So let's comment out these three lines for now. And we're going to try to use the transition property and combine the different sub properties. So transition, and we'll start with the transform. So transform the transition duration we want is

So transition, and we'll start with the transform. So transform the transition duration we want is 800 milliseconds. Let's add a custom easing with ease in out, and like copilot really wants us to do, let's add a delay of 500 milliseconds. So here in a single line, I have recreated the transform property with an 800 milliseconds duration and sing out easing and a delay of 500 milliseconds. That means that these two properties will not

and sing out easing and a delay of 500 milliseconds. That means that these two properties will not get animated just yet. But let's take a look at what we've got with just that. Alright, so the rotation should be animated, but the border radius and the color chain should be abrupt. So let's give it a try, eh? Oh yeah, it works. Uh, because we have the 500 milliseconds delay, it's a little bit confusing because the color and border radius happens instantly

it's a little bit confusing because the color and border radius happens instantly and then the rotation only kicks in half a second later. But as you can see, it's working and it's doing the thing Beyond combining multiple sub properties together, you can also have multiple transitions comm separated. So what I wanna do is remove the delay on the rotation. I want it to start instantly, but then I will go comma, and let's put this on a new line

I want it to start instantly, but then I will go comma, and let's put this on a new line and we'll take care of the other two. So back ground color. Let's accept copilot suggestions and the border radius. Okay, so let's talk about what it's suggested us. We have a rotation that happens over 800 milliseconds is in out instantly. The background color change is going to happen over one second and delayed by 200 milliseconds.

The background color change is going to happen over one second and delayed by 200 milliseconds. And the border radius is going to happen over 400 milliseconds. After 600 milliseconds. It's gonna be a bit hard to notice, so I wanna make it 800 milliseconds as well, and I'll make it stepped with steps five starts. So as you can see, we are combining all the different sub properties we've learned about

So as you can see, we are combining all the different sub properties we've learned about and we are able to do all of this in one single transition declaration. Let's take a look. All right. Can you sort of see it in your head? The rotation is going to start instantly. The border radius is going to be stop motion style with step-by-step changes. Let's give it a try. So nice.

with step-by-step changes. Let's give it a try. So nice. As you can see, the stepped uh, border radius changes are delayed. And so it sort of, kind of makes sense that we can process the different transitions combined together. The one thing I'd say that can get confusing with this one line transition combined properties is when you have a duration and a delay,

with this one line transition combined properties is when you have a duration and a delay, because they're both, uh, a duration expression. Just know if that's the case. That's the first time value will always be the duration, like here. And then the second one will be the delay. You have another example of that here and here. And so while we are on the MDN documentation, you can see we talked about transition timing function, we talked about the transition property,

you can see we talked about transition timing function, we talked about the transition property, the duration, and the delay. We've also talked about the combined properties inside the transition property. The last thing we are going to talk about in the next lesson is the transition behavior.