OK, so next up, we're going to learn about transition time and function properties, also known as
specifying speed curves.
Now, the transition time function properties will specify the speed of a transition and they have the
following values.
Linear ease is in, is out and is in, out.
And we'll take a look at each and every one of them.
So let's start with.
Linnear.
In here calling linear and interpreting it correctly, you get so linear for this, I'm going to take
that idea of div one that we created.
First of all, it changes background color to blue, so I know which one it is.
And then we'll type in transition.
Timing function.
Now, just choose linear and what this does is this will specify a transition effect with the same speed
from the start to the end, it will have the exactly the same speed.
Now, let me also go down here and let's say transition from the width and heights.
Actually, take this take this very quickly and let's change it to now let's let's just leave it this
way.
So this effect so this what we did here will take effect over all of our day.
So each and every day will have the same effect.
But the difference will be this is the linear effect.
This is a straightforward first effect of the transition of the sort of timing, the the speed curve.
Now let's take a look at ease.
I'm just going to with this change, the the divided to number, to the second divided and also let's
change its color to, let's say green.
And now we can change it to ease and what ease will do is it will specify a transition effect with a
slow start, then a fast and then.
A slow end, and I said this is a pretty much a default timing function.
Let's take a look at how this looks.
First of all, the here again.
And now that is.
It's so hot, it starts a bit quicker.
But then it slows down and then it takes on its initial effect.
But this is pretty much linear.
It's straightforward, it never changes its speed.
But this one has a slow start and then it takes a blast effect and then a slow and again.
OK, now, next, let's take a look at ease in this competitive again as we go up here.
Changed it to free, changed the color to yellow, you can change whatever you want, I'm just going
with a few close you and now listen to a dash and in now what this will do.
So the ezine will specify the transition effect with a slow start.
Okay, so I have here something that I don't need, so this would be the yellow one, I want to change
the color to black, the tax code of color and hash I 350.
That's seconds, Mike.
Oh, much better.
So let's take a look at Linnear again.
Then ease.
And now easing.
Is how slowly it starts and then speeds up it.
A next stop will be east out west compared this year change to for you just shortly for clearing this
up.
These are the days that we're targeting, OK?
So let's change its color to purple.
And they're going to take out the color of the text.
Now, we said that this will be is out and what is out will do.
It will specify a transition effect with this law and so that it's safe and let's try out or ease up.
So it started much quicker than it is in estar slowly.
This started quickly and then it has a slow and now last one will be easing out.
So let's take our fictive.
And a stipend is in.
They're out now the is in our specifies a transition effect with a slow start and a slow and.
And this changes to orange.
OK, so he's out again, the slow and easy with a slow start and is in ultra slow start and slow and
OK, so that's pretty much it for transition properties, time and functional properties.
So see in the next one.