‫Hey, there.
‫Welcome back.
‫Welcome to one of the most important advanced concept of US's transition happening now we have discussed
‫about Transform.
‫So if I say transform work, suppose I'm working with this day and I have some content.
‫Maybe I have some H1, I have some.
‫And if I add some transform property, we can change the shape of this device.
‫We can change the color of this.
‫Do all of this is working fine?
‫We can go from point A to point B directly c.
‫If I say I have over 200 pixel, I can convert it to 200 pixel.
‫That's great working fine.
‫That is basically transform.
‫Remember this?
‫We go from point A to point B directly.
‫But what is this transition transition is basically defining the whole journey.
‫So if I utilize transition or the step to change my work, I'm not directly going from 100 to 200 pixel.
‫I can visualize this.
‫I can understand this how it is growing from 100 to 200, and I can also add certain properties as well
‫as restriction.
‫So that means transition help us to define this journey, whereas with transform, we directly go from
‫A to B..
‫I know I'm baking things with philosophy, right?
‫That that's how you are going to understand.
‫OK, let's let me take a few examples and start walking with it.
‫Remember, transition requires some type of trigger.
‫And maybe how about maybe we can do anything else, but it requires some type of trigger.
‫Now what I'm going to do is I am quickly going to define this shape for this dip.
‫So I'm going to jump here and I'm not actually going to select my div.
‫I'm not going to give any name.
‫I'm actually going to work with this.
‫So I'm going to take our weight off maybe 200 pixels and I'm going to take a height of 200 pixels.
‫And then I can add some margin.
‫Let's take margin from top and bottom, let's take on the pixel and then auto to get the item at the
‫center by saying this one should not be visible because we don't have any background color yet.
‫So what I'm going to do is I'm going to add a background color and I'm going to select some random color
‫and then change it.
‫So I'm going to select something related to blue.
‫OK, this looks great, and if I jump here, this is our current shape.
‫Now, remember, transition requires some type of trigger that means either I hover, I select click
‫or is it something that triggers it?
‫So I suppose if I go and do and if I were, how?
‫What effect?
‫So this is going to be that trigger on how it is going to be that trigger to effect something.
‫And yet if I say work on it or change it to 300 pixels or I should say 400 pixels, save this one.
‫Get back here.
‫How about all this?
‫You can see directly change itself.
‫We don't want that.
‫We want to define the journey.
‫Let's go slowly or go in a different manner.
‫We can define that.
‫Similarly, if I want to define a hybrid, I can change it here with the elbow on are regarded itself.
‫OK, that's the base set up.
‫Now let us focus on transition.
‫So how do device transition?
‫The first thing we need to do is utilize the transition property.
‫So how we need to utilize transition property.
‫Yeah, that's the name.
‫It means what you want to change on our trigger to what you want to change.
‫So the first thing I currently, I just want to change my image so I can do it here.
‫Now here we have option to add multiple values.
‫Here we have option to select all.
‫We will do that as we move forward with this session.
‫But for now, we just want to change the rate only.
‫That means we are going to understand the journey off of it.
‫Now we have multiple other option if we want to add delay.
‫That means if I hover over this, I don't need this instantly.
‫I need a one second delay and then the process start so we can add something which is known as transition
‫delay.
‫So if I scroll down a bit, I have option and let's say something else.
‫One second, for now, save this one.
‫Once again, delay than it is going to change, and it takes one second delay again to get back to normal
‫shape.
‫DeLay changes.
‫Billy Origin.
‫So that's all this is going to up.
‫I hope you got the idea, I'm going to remove this for now.
‫Then we have other properties like duration.
‫That means if I add this transition duration, it will define how this whole things need to work.
‫That means from Point A with just 200 Pixel two point B, which is 400 pixel, how much time it took
‫big to increase at length.
‫One example if I say let's stick to seconds.
‫If I hover over this, it is going to take two seconds to go from point A to B.
‫That means 200 Pixel two, 400 pixel if I remove my heart.
‫It is going to take two seconds to come from 400 to 200.
‫Remember, that's how this is going to work.
‫This transition is going to work.
‫And this is important.
‫Also, when we utilize transform it effect everything.
‫There is transition only effective the part that we are offering.
‫So if I see, if I have some content here, say hello.
‫And if I get back here, if I add this transition, you can see the weight of my halo is same, but
‫the weight of exchange.
‫OK, let me remove this one for now.
‫Save this one.
‫Get back here.
‫Yeah.
‫So that is how this generation work.
‫Remember, the is to initiate the change, whereas duration is the journey of that change.
‫I know I'm trying to refer to things very differently for this specific lecture.
‫Now there is something called us timing.
‫That means how you should bind these two seconds.
‫If I go with transition again and I will have options regarding timing function.
‫Now here you will have different other options in the form of cubic, but there are default values like
‫Ethan with ease, and that means start slowly and then speed up or ease out.
‫That means start fast, but then at the end, slow down so we can do a lot of things.
‫Let it ease in.
‫That means it is going to start slow, but then speed up.
‫So if I have it, start slow and then speed up.
‫You can see, let me go with them.
‫Maybe for an instead go with 600 start slow, then speed up.
‫I hope you got the idea.
‫Now these are going to be fought around you, which you can see like.
‫Remember, these are the default values, Eason, he's in, he's out, he's out.
‫Are all these these Kubik values, these what are they and how we are going to utilize?
‫Let's talk about this with now help of are truly the name is Kubik Ba'asyir itself.
‫So just jump onto Google.
‫Search about it.
‫And how you will get the school now head, you can define your own speed, so maybe you want something
‫to slow it.
‫Initial phase and super fast at the end.
‫So if I just compare this goal?
‫So how does Blue one is about the easy one?
‫And then this pink one is the setting that we did.
‫If I said we have selected slower, then easier and faster at the end.
‫This is I remember.
‫Lowered initial and then foster at the end.
‫OK, let me change.
‫I want foster initial phase and then slow it.
‫Then I say go.
‫I go fast tracked initial phase slow at the end.
‫Remember this being one?
‫And if I said just said Nina, that means all the peace will remain.
‫Jim, you can see throughout it's been.
‫Now I can change it according to our own requirements.
‫If you see this easing.
‫And then, no, this blue one, let me get back here, and now you see this season.
‫Initially, it was slow and then it got to some speed.
‫So how you can copy this code and change accordingly if you want something slow at initial phase and
‫then fast speed up at the end, you can set the value had with the help of ping.
‫Copy this whole thing and then you can pass your own values.
‫If I saved this one, get back here.
‫Now if I have I.
‫OK.
‫So that's how this cubic measure is going to work.
‫Now, then this point of time, you are only walking with one value.
‫And remember, I just commented this delay because I don't want to wait for the change.
‫So if I add this delay, that means I have I need to wait to once again, then my whole process will
‫start.
‫So we wait one second, then whole process will wrap up.
‫So I don't want this delay for now in this one.
‫But suppose I want to change my height also.
‫So I have height and if I say hi, does 400 pixel now remember, I haven't read my height with my transition
‫property, so if I get back here, my height is instantaneous, but we're just changing that journey.
‫So remember, the spot height is instant because we haven't added our height, but the property.
‫So what I can do is I can add my height also.
‫If I add this one, get back here, I can see it's growing in a proper pace.
‫Now, if you want to change everything and follow this same transition duration on timing for all,
‫you can also use on and see this one and get back here and here, you will have option to change everything
‫that we currently have.
‫So remember, this triggered part is important and the other properties.
‫Now, the other concept that I want to discuss is shorthand property and a few examples.
‫So just jump on to this reference or any other website because these are common properties.
‫If you see transition delay, you will have examples here.
‫So delays, you know, everything is instant 1.2.
‫Second, that means you have to wait 1.2 seconds and then you are going to have this again.
‫You can take milliseconds to have the change.
‫And so it's taking time.
‫Now you can also take negative value that means it will skip the initial part and start as a 500 milliseconds
‫are already gone.
‫So if I say OK?
‫So it start from the position where 500 milliseconds are already done.
‫Then there is duration, which is going to define our journey over zeroes again, that means changes
‫and strength.
‫But then we can define the milliseconds or seconds to understand our journey.
‫Then we discussed about property, what property we need to change on very tight.
‫We can do that again.
‫We have about timing function.
‫So we discussed a few others with the help of our tool excel.
‫And then you can also find steps how this is going to change.
‫And then comes short and property, so you can define what property you need to change your duration,
‫your timing function and so you can do a lot of things.
‫At this point of time, we are taking duration for height.
‫We're the same.
‫But if I want something different for all, I need to utilize something like this transition property,
‫then it's timing property.
‫It's timing, so we can do that.
‫OK, that's done.
‫Now let me also change on background color.
‫So let me sit here.
‫Let me go from blue to yellow or in something.
‫Save this one.
‫Now, if I get back here.
‫Now you can see it's working fine.
‫Now we don't need to act like this.
‫What we can do is let me into all of this one now.
‫So let me comment all of this.
‫And let me utilize term property or individual item, so I jump over here, you can see I can I transition,
‫then I have to add my property, then head, I need to add duration.
‫This is going to be my timing function and then my delay if I copy this one.
‫Now head, I can add multiple values for multiple item and can utilize comma to rewind multiple properties.
‫For example, here I want to change my background color.
‫And ahead, no one second.
‫Lina, I don't want to pass any delay.
‫Then again, comma, I want to change my work.
‫So this is going to be my great.
‫Not once again, I need to take two seconds and there's going to be ease in.
‫And then I want my height.
‫Those again, these and saved us on it back here.
‫Hey, you can see it, this is working fine.
‫Let me try to take some milliseconds so we can change so we can see instant change.
‫So Melissa can save this one.
‫Get back here.
‫You can see that's how it does walking.
‫So here you can utilize that shorthand property to pass multiple values, as well as you can control
‫things in a single lane.
‫Remember you going either delay here?
‫Maybe let me add one second here, so I thought things will work fine.
‫These width and height.
‫But this is going to take one second delay.
‫Get back here.
‫One second delay with color and it's walking by.
‫So I hope you got the idea about whole transition thing.
‫There are a lot of things that you can do.
‫Just jump I some reference, take some idea and start walking with these example and try out on your
‫own.
‫Things will be easier.
‫That's all for this lecture.
‫I hope this was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.