0:00
Suppose I have a website and there is a sidebar on it
0:02
Suppose I click on a button, the sidebar comes out from the left side
0:06
You tell me yourself that it will look good if the sidebar comes out like this or it will look good if it comes out like this
0:11
The smooth transition you just saw on your screen is made with the help of transition properties in CSS
0:17
That is, we say that there should be a very smooth transition from one property to another property so that it looks appealing to the eyes
0:25
In today's video, we will learn to make such transitions. Like this video and do write sigma batch op in the comment section below
0:32
Let's go to the computer screen. Let's roll the intro. So guys, I have come back to the computer screen and I will make a new folder named video45
0:49
Now, what is this transition? First of all, I will tell you this. Because if you don't know what transition is, then you won't be able to understand this property so well
0:57
Transition means going from one state to another state very smoothly. So what happens in CSS transition
1:04
It is exactly the same thing that going from one state to another state very smoothly
1:09
Now suppose I have a container. And after this, I have a box inside it
1:15
And suppose I write some styles here. So I will put a style here
1:19
Now suppose I put some styles in it. I will write .container here. And after this, I will write .box here
1:24
What will I write inside the .container? I will write the background color in .container
1:28
First of all, let's write red. Now don't say why are you choosing red? It's my choice
1:32
Now I will write the background color here. Let's say aquamarine. If this is the case, then I will make it aqua
1:37
There is nothing to feel so bad about. Okay, I did this. I made it antique white. Now I will show you its preview
1:42
You will say that I have seen the preview. I know, but I have not put its width and height
1:45
So we don't have to do it so soon. So I will make its width, let's say 50vw
1:52
And I will make its height, let's say 40vh. Okay. And what I will do here is that I will make its height 10 times less
2:00
Basically, it was a very simple box. I am showing you. So this is our structure. It is standing now. Okay
2:06
Now I want it to be translated to the front. So if I put a class in it, let's say I write a class here
2:10
.tr which will translate. I will just put its name here. Translate
2:15
And what am I doing in this? I am saying that the transform is there
2:20
You do that. Translate x. You have talked about it. Translate x
2:25
And let's say we do it 10%. Okay. And along with that, I want to do it in translate y. 10%. Okay
2:33
So if I translate x, translate y. And as soon as I put this class on it, what will happen
2:37
Let's say I put a class called translate here. So as soon as I put a class called translate in it
2:42
it will be translated 10%. Okay. 10% will be translated in x
2:46
10% will be translated in y. And the percentage will be the percentage of its width. Okay
2:50
So if I do it a little more, or I do one thing
2:54
Why don't I do vwe? Why don't I do vhe? So that it looks a little moving
2:58
So it came down. Okay. Now let's say I remove this class from it. I will show you by inspecting
3:02
We do this work with JavaScript. But now I will show you
3:06
If I do it like this. And I put it. So see it is coming suddenly. It is coming with a shock. Okay
3:11
So what does it mean to come with a shock? It means that this is not smooth. Transition
3:16
It is not coming easily. Not at all. It is not doing this. Now because it is not coming easily
3:20
That's why we have to make it smooth. And that is what the transition property does
3:24
So what will I do simply? I will say that wherever dot x. Dot translate is applied
3:29
Or what will I do in this element? I will say that the transition
3:33
Apply the transition property. Now the transition property is made up of four properties
3:37
Never learn the transition property directly. Learn four properties. First of all, the transition property
3:43
What is the transition property? Okay. Then after this, your transition. One is the timing function
3:51
Then the transition duration. The second number is the transition duration. Then transition timing function
3:57
Transition timing function. And after this comes the transition delay. Okay. So these four functions
4:03
You guys remember this. Which property do I want to transition? I want to transition the transform property
4:09
How much duration? I do it for three seconds. What will be the function
4:14
We have an ease in. There is an ease in out. There are many other options. If you do this, you will get to see a lot of functions
4:20
I will tell you what it means. But for now, we do ease in out here
4:24
Ease in out, ease in. And what is the difference between ease out
4:28
I will tell you. And transition delay. Suppose I say that I want it after four seconds
4:32
I want it after at least one second. I explain all four properties
4:36
Which property should be transitioned? First of all, I will show you its output. How will it be
4:40
Look, I will reload it. As soon as I reload it. You see here. As soon as I remove this transform from here
4:46
Look, it went up. And how many seconds will it take to go from here to there
4:50
It will take four seconds. All the three seconds I had put there
4:54
I had put three seconds. Transition duration. How much duration do you want to do the transition
4:58
That is your transition duration
