Hello, everyone, and welcome back.
In today's video, we will learn about the transition properties in see assess these transition properties,
allow elements to change values over a specified duration rather than having them occur immediately.
Say, do you want to change the color of our death from blue to call when we hoeber?
So right now in I home, nothing happens.
So first, let's add that.
Let's bring a barcoded.
All right.
So Dev on Huvelle.
Let's change the background, color to light, Google.
Let's save it.
And now we're not over on the Element Duckula genius to Google instantaneously ceiling on this color
to change from you to Google in one second.
This could be achieved using their transition properties.
So let's give it a try.
First, we have to define for which property are we controlling the transition.
So for that, we have a property.
Transition property.
So we want to change the background, Dillons.
So that's why we love to give.
By Goncalo over here.
All right, then we need to define the duration of the transition.
So transition, duration, so let's say one second.
You can also give the value in milliseconds.
So either you can write it as one second or thousand milliseconds.
Let's say that.
Now when I huvelle.
Slowly, it turns to light green and it turns back to blue.
You see this difference.
Let's increase this time, let's say, three seconds.
And now when I hold on it.
It slowly goes to Gurel.
And when I remove the pointer, it comes back to blue.
We can also control the animation speed.
So save it.
If you want to start the animation fast and end it slowly or save, you want to start it slowly and
end it fast.
For that, we have another property called transition time in function.
So let's add that.
So transition.
Timing function.
So this can accept multiple Lolly C E's in.
So what Eason does is it starts slowly and ends fast.
It accepts and the value is out.
So what this does is it starts first and AIDS slowly.
I'm sure he wouldn't be able to notice the difference right now.
So let's add another div.
Let's say Dave do.
Let's say let's give this death to an I.D., let's say you do so coming back here.
And for Dave, too, let's give it a different background color.
Say this.
Let's save it.
And this is an idea so harsh.
That's David.
Now, as you can see, they've got to the from those with different color.
OK.
So for the first one, let's keep the stymying function as he's out.
So the second one, let's keep it as is in.
Let's say it.
So when I see it, you should just try to notice this difference.
So for the first one, we see the blue glow very quickly and then it slows down.
But for the second, it starts slowly, but it ends faster.
So that's the difference between easing and is out.
If you want to keep a constant speed, you could use a value línea.
So now it comes with a constant spin.
There's a shorthand property for this transition properties.
It's called transition.
So let's try that.
Let's common these first.
Let's say transition.
So whenever we work with shorthand properties, Cequent becomes very important.
So the first one is transition property.
So in our case, it was background color.
Then space.
Then it accepts the duration.
So in our case, it was three seconds.
After that, it accepts this timing function.
So let's say he's in and let's save it.
And as you can see, it still functions the same way similarly over here.
We could replace this with the shorthand property and change the student is out.
All right, let's say on who will want to change this Squirty Sokal.
Before we get to the transition, let's think how do we convert squat to a circle using Sears's?
We can use the border radius property and give a dollar value.
Half of off with.
Let's give that a try.
So on, who would change the border radius to.
So currently the word is.
300 pixels, sábado radius can be 150 pixels, let's say.
And now in a whoever it could reach in into a circle.
But that color takes time.
This is because we haven't handled the border radius transition.
So let's try that also.
Now, to add multiple transitions, we could just separate them using a comma.
So instead of background color, the standards border radius.
Let's keep order values, see?
So three seconds on, he's in.
Let's say that similarly for the second one.
Border radius, three seconds on use of, let's say, would.
All right now, and I hope it slowly converts to a so-called.
And when I remove the most point, do it slowly and words back to square.
Similarly for this one.
It slowly concludes to circle.
And when I remove it, it goes back to square.
That's all for the transition properties.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video.
Bye.
And take care.