‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us complete this whole part in terms of transition, transform something related
‫to animation, as well as anything to get to background.
‫So the first thing I'm going to do is I'm going to play with the background.
‫So globs of hair.
‫There is a small underlain behind this whole learning app.
‫We can utilize that.
‫What I'm going to do is I'm going to jump on to this whole.
‫Learning, acting, and I have I spent what I can do if I can jump on to Main Line and then select a
‫span, or I can add a class here and call this class as highlight.
‫Or maybe anything else.
‫So let's hope in this highlight for now, get back here.
‫And this should be after my main line up here.
‫And now here I can utilize my before.
‫What I'm going to do is I'm going, I'm going to select before, then add a background color and then
‫before I can set bottom opacity z index.
‫Anything that I want then up affect with.
‫What I mean by this is can I'm going to go it before?
‫And let's say plus, let me add some contenders.
‫This is going to be definitely the first thing I'm going to do is help me out some quantum the test
‫papers.
‫So if I jump back here, you can see this is unbelievable and I cannot select this.
‫So this content is available.
‫What I can do is I can provide a fixed rate hike and background color.
‫So what I'm going to do is add I'm going to have a word, maybe three one I fix and then I'm going to
‫have a height, maybe 20 percent, and then I'm going to have a background color.
‫So let's take a background color, which is a bit like.
‫Now, once that is done, I just need to utilize my position absolute and then I can go with bottom
‫zero.
‫So let's go that position.
‫Absolutely.
‫And then I need proof of it.
‫Bottom.
‫Zero.
‫Now, remember, if this is position absolute, we need to set the beating as relative, which is going
‫to be main line, which is going to be selective now.
‫If I jump back here, you can see this whole big box.
‫What I'm going to do is I am going to prefer a Z index.
‫And let me say a minus one, if I go back now, you can say it's irrelevant.
‫I can also change the opacity so I can walk with opacity.
‫Maybe 0.3 save this one.
‫Yup.
‫Working with, you can see.
‫Now you can try to add something else that was a base example.
‫So we are taking a fix for it because if my before is starting from this point, it is going to somewhere
‫some points.
‫So if I take five picks, then it will be something like this only.
‫Maybe let me increase to 50, save this one.
‫You can see the small part.
‫So I need to take.
‫I'll fix it.
‫So I can stretch it according to my requirement.
‫I hope you got the idea what we are trying to do, and we can take hundred percent care if we want a
‫forward hundred percent.
‫This will stretch all the way.
‫What I can do is I can take after it will start from here and then I can remove the whole property,
‫which is this color property.
‫And that's that's a bad idea.
‫So let's go with facts.
‫Fix where to save this one and get back here.
‫Looks great.
‫Great.
‫That's it for our background on the line.
‫The next thing is about the transition.
‫If you see we don't have any housing effect, but if we add any Howard effect, that would be instant.
‫So if I go ahead, go to my apartment.
‫Oh, it is Biden.
‫And let's say, let me add in our.
‫Now, had I can I add how in effect, so I need to change only background color on how I reflect and
‫I'm going to take something dark?
‫Let me take something.
‫And if I get back, you can see now it's changing instantly.
‫So if you remember about transition, what we can do is we can slow down these people.
‫We can slow down the whole transition phase.
‫So what I'm going to do is I'm going to say transition.
‫Now I am going to pass what property I need to change, so here and we just have background, so I can
‫say all then the amount of time that is the duration of this whole transition, let's say with zero
‫point five seconds.
‫Now we need to provide how we need to move.
‫Maybe Eason is out something like direction so we can provide different values with the help of cubic
‫Mazir.
‫But let's call it even save this one.
‫Get back here.
‫You can see it's changing slowly now.
‫Now, had I can change the time, maybe 0.2 seconds.
‫Walking well, it's not instant, it's taking 0.2 seconds.
‫So that stands for the our effect now we can do something else that is animation, which is pretty important
‫for this point now.
‫OK, let me get back here.
‫So we need to animate our float vehicles, float by.
‫For now, let me just refresh to let us do type of animation, the first one is that that's going to
‫be from left and right.
‫So these are the two blocks that are coming in.
‫That is only one time one demining mission.
‫And then this is infinite.
‫So let's cross to the infinite animation.
‫What I'm going to do is.
‫We need to add animation to our flawed theory, as well as being great.
‫We just need to work with key frames that should be easy.
‫So I'm going to call this animation as Bond.
‫There will be certain properties like animation name, then duration, they live again, easing these
‫out in finite about how many times we need to do.
‫And then they review others.
‫So what I'm going to do is I'm going to provide the animation name, or I can use the single property
‫to do a bit of animation name as bounce.
‫Duration may be 0.5 second.
‫Diane Dimond function again, next Big E's only.
‫Yup.
‫We need to delay one second for now, because the first animation will be coming from left and right
‫and then we are going to bounce.
‫If you refresh this one plus they are going from left to right and then slowly start to bounce.
‫Get back here and then there will be attrition count in finite.
‫Then there will be direction.
‫I'm going to go with alternate.
‫And we don't need anything more for now, looks good, but we need to define the key frame for balance.
‫Let me copy this one also here.
‫Save this one and let me define all the key frames, so what I need to do is use key frame identifier
‫will be out of bounds and inside this we need to define the properties.
‫So on zero percent what we need to do and on course and what we need to do.
‫So let's stick with zero percent.
‫I need to use TRANSCOM.
‫Why?
‫Because I'm moving up and down, so I'm not going to change the position.
‫What I'm going to do is video transform.
‫I have a property and translate X and Y.
‫If you remember Translate now, this can help us to move either on the extraction or wide eyed action.
‫So we need to move up and down.
‫We are going to go with quiet addiction and zero percent are positioned should be zero Brexit.
‫And 100 percent, we are going to transform towards 20 percent.
‫So I just need to translate.
‫And we'll work on the Pixel, Save the Swan, get back here.
‫You can see the movie now, we definitely need to change the duration.
‫It's not too fast if you observe this, this is slow and this is big fast.
‫So what I can do is I can jump sure does 0.5, what I can do is, I can say, maybe two seconds.
‫So this one is working fine, we just changed it to go second.
‫Something similar we can do here, let's say two seconds.
‫Now I'm going to provide a different word.
‫Otherwise, there will be same in terms of movement if this is going down.
‫This is all tumbling down.
‫So what I can do is I can change their duration, maybe 2.1 seconds.
‫And also, I can change.
‫Maybe this should start at maybe 0.8 again.
‫And in this way, both will have a different direction.
‫You can see.
‫Would depend on your requirement.
‫I'm just trying to experiment things, so that's done, I hope you got the idea about animations.
‫I might refresh this one.
‫It takes some time.
‫And then the animation started.
‫Great.
‫Now we also need to add this second animation, which is if you observe this coming from left and right,
‫we can do that.
‫All I have to do is add a keyframe.
‫So here I just need to go read keyframe.
‫Let's call this house slide left and right that could be different for both.
‫And because here this is coming from right and this is coming from left.
‫I can call this as from right from left on, maybe slide right, slightly left.
‫Slide right means that moving towards right.
‫The point of zero percent.
‫What I'm going to have is I need to transform to minus four per cent.
‫This time it will be because we are on a horizontal axis.
‫So let's big minus 50 pixel and then on 100 percent.
‫I need to get back to my original position.
‫Remember, I'm coming back to the original position when this whole animation ends.
‫So what we are going to do is we are going to start from here, then move here and then remain here.
‫So that will be one enemy, Charlie.
‫Now what we are doing here is we are moving this 250 pixel on the horizontal side.
‫And then as soon as we visit the page, it is is going to start from 50 pixel minus 50 pixels and then
‫come here.
‫That is, it is moving to zero percent from minus 50.
‫So what I'm going to do is I'm going to get with my what I'm left.
‫And had I just need to add a comma so I can add multiple animation.
‫So this would be slide right.
‫Remember, we are sliding to the right side.
‫Slide right means here I'm going to go from left to right.
‫Remember?
‫So we are going to start with minus 50 pixel moving towards zero pixel.
‫Slide right on, I'm going to take our duration of 0.5 seconds and then definitely please, the next
‫will be more clear.
‫But I want this to be in straight.
‫And number of counts that could be one.
‫And let's take this as alternate or anything else we can find because we are just taking one iteration.
‫If I get back here and if I refresh, you can see it's working fine.
‫Now here we are taking this as a 0.5 second, that means the initial 0.5 second defining mission will
‫be walking.
‫After that, we will have a 0.3 second break and then we will start this since this is zero point eight.
‫This is 0.5.
‫I hope you got the idea.
‫What we are trying to say is this animation will start off to zero point eight again.
‫But out of that 0.8 second, this animation will take 0.5 second, and then there will be a gap of 0.3
‫seconds.
‫Remember, at this point, we can take this as zero point five etc for the delay, and the animation
‫will start instantly refresh.
‫You can see as soon as this comes, the animation started.
‫OK, we need to take something similar for our slide left.
‫And this time it will be opposite.
‫We need to start from fifth to excel and then come back to zero.
‫And I just need to complete this whole property.
‫Add it in and start right, it will be left.
‫Hair that delays once again, I can change it to 0.5 itself, and everything looks fine to me.
‫It back hair refresh, you can see a talking point.
‫Now totally depend on you how you play with this looks fine, I hope you got the idea about animation.
‫We just need to change how it affect foreign buttons now.
‫As well as I need to add some gap here and this image.
‫OK, so let me add the image first.
‫What I'm going to do is I'm going to jump here and haddock Maradi image and then I will change its position.
‫So let me simply add the image.
‫This is going to be inside my media.
‫There will be a shared folder, and then this is going to be a busy one.
‫Save this one.
‫Get back here.
‫This is what I need to do is I need to change it.
‫I need to change and I need to provide a class with me on this class has.
‫Be.
‫Copy this one.
‫Get back here.
‫Keep this here.
‫Now here, I can change it to position as absolute, and then again, there will be a position which
‫is going to be more calm as a precaution than there would be left because we are going to move towards
‫left side, the mixing and the very next will be minus one.
‫I don't want this image to hover over these content so you can see the position is set.
‫I just need to add animation Comal County so I can add balanced animation.
‫If I get my cash card on, I can copy this animation.
‫Yup.
‫This is one.
‫And I can change the duration may as well as the delay, so let's say duration us pause again, so it
‫will be slowly moving it back home.
‫We're going to see.
‫I hope you got the idea.
‫What we are trying to do.
‫Now, how you can change the -- size for the button, you can change the text.
‫Totally depend on you.
‫So the next thing remaining is add some padding here and here and do some changes, small changes.
‫So what we are going to do is we are going to carry this in the next lecture.
‫We are then going to talk about something related to your ability as well as components.
‫And talk about media, but it's because we are going to utilize these colors again and again.
‫So let's store them in our variable and create our own team.
‫That would be much better.
‫I hope you got the idea.
‫What we are trying to do the last one stock has done.
‫All of this will be easy because we just need to replicate things.
‫So thank you for calling and I see you guys in the next one.