CSS and GSAP Animation: Beginner to Advanced journey

1. Course Introduction: Hello, and welcome to CSS and GSP Animation, Bane to Advanced Journey Course. This is the most detailed and complete course about CSS Animation. He. My name is John Shorter, and Full Stew PP Park and online instructor. Now, let's see what we are going to learn from this class. We are going to start this tutorial with CSS filter. Then we're going to learn CSS transition, transition timing function, transition delay, then we are going to jump into the transform section. Here we are going to learn rotate, translate, scale, skew metrics. After that, we are going to learn three d transformation, three d translate, scale, rotate, et cetera. Next, we are going to learn the most important part, prospect. Then we goular transform style, backspace visibility, then we're going to jump into the Sess animation section, such as key frames, how we can operate animation, et cetera. Then we have gular animation fill more, paste mode. After learn all of the Sess animation property, we're going to start GSP animation. Yes, as I told you, we're going to learn complete animation. In this tutorial I cover, GSP animation also. In first two tutorials, we are going to introduce how we can use DSP animation and how we can implement it. And then we're going to learn about GSP timeline, how we can use GSP timeline. Next, we're going to create a project using GSP timeline animation. Then one by one, I'm going to cover multiple CSS animation project, such as animated link, three D O flip, et cetera. Let me show you the practical demonstration, what kind of project we're going to cover in this class. This is our first project where I'm going to create a simple animated button. If I hover my cursor on this button, you can see the transition. Is a very simple one. Then we are going to create this three D flip hover button. If I hover my cursor on it, you can see it flip the button, and it written, click here. Click, if I hover my cursor on it, as you can see it flip the button. It's a three D flip button, and also you can notice the three Dfect. Next, we are going to create table animated text. Here you can see the light flicking effect. Also, you can see the Shan. This text is t. Here you can type anything. Suppose hello word. This is one of the most cool effects I ever view. Next, we're going to create these animated ives. W is going to follow my cursor. As you can see when I move by cursor, according to the cursor position, it follow the ives. Whenever I move by cursor above the mot, it change the physical reaction. Then we're going to create this three D V circle. You can see the movement of the circles. At the next project, we're going to create the D layer animation. If I hover cursor on this I, you can see the result. You can notice the transparent layers below it. If a debt by cursor again is back to its own plate. At the next project, we are going to create this three d rotation animation. As you can see how it suited the wheel. We are going to create this kind of project. Next, we are going to create this rainy cloud animation. As you can see from this cloud, how rain drops are falling and upper fall in the ground, it's vanced. And we're going to create this loading animation. It is a animation. At last, we're going to perform this horizontal timeline animation using GSA. Yes, also we are going to cover GSAP in this tutorial. We are going to create a project using GSA, a horizontal timeline animation, and how are you going to notice the transition of this timelines. What are you waiting for? Let's start animation together. 2. CSS Filter Tutorial Part One: Hello, guys, good to see you back. This is the first tutorial related CSS animation, and we are going to start this tutorial using CSS filter property. Using filter, we can change image effects, and we have total 12 effects that we can use in our image. Our first effect name is none. If you do not want to use any effect, you can use this property. And using blurred property, you can blur your image. And using brightness value, you can reduce brightness or increase brightness. For contrast, you can use contrast value, and ruptured value work like a shadow of this image. And using scal value, we can black and white our image. And using rotate, you can fill different color with different angle. And our next value is invert. If you remember the old camera rule, then you can understand the effect very easily. Our next value is opacity. Using opacity value, we can control the transparency of this image. If you want to control saturation of this image, you can use saturate value. If you want more color in your image or less color in your image, you can use this value. Our next value is CFA, and our last value is URL. This URL value, work with SVD images. In this tutorial, I'm going to cover these six effects. Let's start the practical and see how it's work. As you can see, side by side, I open my Viso studio Cortor and my browser using Live Server extension, and I already create a estil document in my current working directory. As you can see in my browser, there is a image, and I already insert this image using S tag. As you can see in my style section, we say 600 pixel eight to this image, and height or two, and I'm going to use all this filter in this image. Effects are play very important role in CSS animation. That's why I start this tutorial with CSS effects. At first, I'm going to use filter property. Filter. Our first value is none. If I set this file, here you can see, there is no changes, there is no changes in this image. Because this is the default value of this property, and our next value is blur. So to tie Blur. Suppose I want to blur this image up to four pixel. If I set this image, here you can see the result. If you want to make it more blur, you can increase the value. Suppose 20 pixel. If I set this file, you can see the result. The default value of this blur property is zero. If I use zero value and then set this file, here you can see the result. Now our image is clearly visible. And this is the use age of blur value, and our next value is brightness. 100 is the default value of brightness, 100%. This value work with percentage. If I save this file, you can see there is no changes, and now I want to reduce the brightness, 20%. If I save this file, you can see the result. It reduces the brightness of this image. If you want to back to the normal brightness, then you need to pass 100. If I set this you can see the result. If you want to increase the brightness of this image, then you need to pass more than 100% value. Suppose, I'm going to pass 300%. If I set this file, you can see the result. If we pass 0% brightness and then set the file, here you can see, now it's completely black. Let's jump into the next value, which is contrast. So to type, contrast. Hundred is the deft value of contrast, 100%. If I set this file, you can see the result. If you want to increase contrast of this image, you need to pass the then you need to pass more than 100% value. Suppose 200%. If I set this file, now you can see the contrast. If you want to decrease the contrast, then you need to pass below than 100% value, something 50%. If I set this file, you can see the contrast. If we pass 0% value and then set the file, now you can see there is no contrast in this image. IE p 0%, as you can see, our image turn into gray color. Our next value is drop shadow. But before I use this value, I'm going to reduce the image. 400 pixel. This value is similar to box shadow property. First, we need to provide horizontal shadow. I'm going to provide ten pixel. This is for x axis direction. Next, we need to provide vertical shadow. For y axis, I'm going to pass ten pixel once again. Then I'm going to pass the blurrinne of the shadow, which is seven pixel. Then we need to pass the color of the shadow. I'm going to use green color. If I set this file, here you can see the result. You can change blodiness of the shadow also. AI pus, zero pixel, and then set the file. Now you can see it act like a solid shadow. Not only that, you can use negative value in this parameter. Suppose I want this shadow minus y x direction. If I set this file, you can see the result. This is the UK job drop shadow effect, and our last value is gray scale. Let me show you. Gray scale. Using this effect, we can convert our color image into a black and white image. 0% is the default value of this gray scale parameter. If I set this file, here you can see there is no changes. But if I use 100% and then set the file, now you can see it completely turned this image black and white. You need to remember, we need to pass value between zero 200%, not more than 100%, you can use any value between this. Suppose I want to pass 70%. If I set this file, you can see the result. Now the image filled with 70% gray and 30% color. This is it for this tutorial. In the next tutorial, I'm going to cover these remaining filters. He rotate, invert, opacity, saturate, sepia, and URL. Thanks for watching this video, stay tune for our next tutorial. 3. CSS Filter Tutorial Part two: Hello guys, good to see you back. This is the second part of the CSS filtered tutorial. In this tuterial, we are going to cover these six filters. He rotate, invert, opacity, saturate, Spa, and URL. Let's start the practical and see how it's work. Here you can see, side by side, I open my visual studio coreor and my browser using Live sever extension, and I open my previous estel document for this example. At first, I'm going to call the filter property filter. Our first value is rotate. And here you can use 023 60 degree value. I'm going to pass 150 degree DEG, and then set this file, here you can see the result. If I pass 100 degree and set this file, you can see the different result. Using this value, you can try 360 combination, 360 degree. If I set this file, you can see the result. There is no negative parameter for this value. Let's jump into our next value, which is inverted. So type invert. If I set this file, here you can see, it completely invert the image, and we can pass parameter zero to hundred percent. Suppose I want to pass 0%. If I set this file, here you can see, this is the differed value of this property. If I pass 50%, and then set the file. If we use 50% value, now it's completely turned into a gray color. If I increase the value, something 70%, and set this file. Now you can see the result. It still invert our image, but you can see the gray layer on it. Similarly, if I reduce the value below then 50%, something 20% and then set the file, as you can see it not invert the image completely. This is the use gage of invert value. Our next value is opacity. As you can see, now our image is fully visible, and now I want to make this image transparent. For this, we need to use opacity value. If I set this file, as you can see, there is no changes because we do not provide any parameter in this value. Now I want to make this image semi transparent, so I want to provide 50%. If I set this file, you can see the result. If you make this image completely transparent, you need to pass 0%. If I set this file, the images still exist in this place, but we made it completely transparent. If you make this image completely visible, you need to pass 100% value. I hope now you can understand this value, how its work. I hope now you can understand opposity value, how it's work. Our next value is saturate. This value going to provide strength on color pixels. So totype saturate. Using this value, you can control the strength of this color. Hundred is the default value of this property, 100%. If I set this file, here you can see there is no changes, and now I want to saturate this color. I want to pass 200%. If I set this file, you can see the result. You can see the change of the color, and if you want to make it desaturate, you need to pass value less than 100%, something 70%. If I set this file, now you can see the color of the image looking very dull. If I pass 0% value and then set the file, Now you can see this image completely turned into a gray scale image, means black and white image. I hope now you understand what is saturate. Our next value is CFA. So to tie CFA. This filter give you the vintage look of this image. If I set this file, you can see the result. Here you can pass parameter between zero 200%. If I pass 0% and then set this file, now you can see the actual image. If I increase the value, 50% and then set the file, here you can see it applies some CFA effect in this image, and 100 is the value of this property. There is no negative value and pixel value for this property. O last value is URL. For this, you should have knowledge of SVG images. If you don't have basic knowledge of SVG animation or SGD image, you can check out my course. This course is available in this platform. Just go to my instructor profile and you can find this course. Last thing I want to say, suppose you want to apply multiple effect in this image. Suppose first you want to use blood effect on this image. So want to type blood to pixel. Then I want to apply PR effect in this image. PR, 50%. If I set this file, you can see the result. And now I want to increase the brightness of this image. Brightness, 200%. If I set this file, you can see the result. You can add as much effect you want. I hope now this CSS filter concept is clear for you. In the next terial, we're going to understand what is CSS transitions. Thanks for watching this video, stay tuned for our next Tual 4. CSS Transition Tutorial: Hello, guys, good to see you back. In this tutorial, we're going to learn a new property related CSS, which is CSS transition. This is one of the most important property for CSS animation. Now the question is, what is transition? Transition mean smoothness. Suppose you want to change a position of one object. Otherwise, you want to increase the object width. Let me show you the example. As you can see in my estimate document, we have total two D, and I want to increase the width when I hover on my red object, and I already set a transition in this object. If I hover my cursor in this object, you can see the result. You can see whenever container extend the width, you can see a smoothness effect. If we did not use the transition effect, the work would be done in one go. Then you cannot see the smoothness when it increase the width. That's why we need to use transition. Similarly, for our next object, we reduce border radius who over the object. Let me show you. As you can see, there is a beautiful transition. If we do not use this transition, Then it would be done in one go. It would be done just one blink of in your I. For smoothness purpose, we need to use this transition. Let's talk about properties. Basically, transition come with five properties. Transition, transition property, transition duration, transition delay, and transition timing function. Basically, our first property is short end of all of these properties. If you want to use this four property in one line, in that case, you can use transition property only. Basically, our first property is transition property. Using this property, we can specify, where do you want to use these transitions? Suppose I want to use this transition for border radius. Otherwise, W. In that case, we need to declare the property name, something like transition property, border radius, otherwise, transition property, W. Our next property is transition duration. In this property, you can specify how long you want to run the animation. Our next property is transition delay. We use this property to determine when the transition will begin, and our last property is transition timing function. This property come with some inbuilt effects. And using these effects, you can control the smoothness of this transition. This is it. Let's study practical and see how it's work. Here you can see, side by side, I open my visoto Cortor and my browser using Lipseer extension, and I already created estimL document named index dot est melt. Here you can see a deep inside this document. And the deep height is 200 pixel and W is 200 pixel also, and I do not use any Hva effect in this def. And now I want to increase of this deep. So first, I'm going to use the transition property. Transition property. As I told you, I want to increase the wi. I'm going to call the width property. With this property, we need to use another property. We need to use transition duration property, transition duration. Using this property, we can declare how long we want to run this transition, and I want to run our animation for 2 seconds. I'm going to type two a. You can take your own value. Otherwise, you can use millisecond also. When I hover my cursor in this D, I want to increase the container width. I'm going to use pseudoclas. Dot one colon hover. Then inside the calibraces, I want to increase the container width. So type with 400 pixel. If I set this file, if I set this file and hover my cursor in this deep, you can see the transition, and you can see the smoothness of this transition. Similarly, if I hover out my cursor, also you can see the smoothness. Let's see what happens if I remove the transition. I'm going to comment out this two property. If I set this file and hover my cursor in this box, you can see the result. There is no smoothness, when it increase the width. Just blink of in your eye, it completes the transformation. That's why we need to use transition property. Because it's give beautiful smoothness effect to this transformation. As you can see, we just apply this transition in our width. But if I increase the height in our hover selector, height, 350 pixel. And then set this file. If I hover my cursor, as you can see, just blink of in your Iy, it increase the height. But you can still see the smoothness effect in width. If you want to add same effect for height, then after width, coma, you need to type the property name, height. Also, you need to declare the duration for this transformation. I want to use three second. If I set this file and hover my curser into this de, you can see the result. O width transformation complete in two second, but our height transformation complete in three second. Not only that, we can apply the same effect for background color. Some to type, background, green. Also we need to call this property background, height, coma, background. For background, I want to use four second. If I set this file, and whoever my curs are in this de, you can see it took four second to change the color. This is the uskase of transition property and transition duration. Now I want to use all this value in a single line. I'm going to comment out this two line, and now I'm going to call only transition. Now I'm going to use all the value in a single line. I'm going to copy the values and paste it here. Also, I'm going to copy the duration values, and after a space, I'm going to paste it. If I set this file and hober my car in this deep, you can see all the effects at once. Using this property, we can make it one liner. This is the short end of all of this property. At first, you need to declare the transition property names, and then you need to declare the transition duration time. Now, suppose you want to use two second transition duration for all of this transformation. In that case, you can type all hair A double, and also, you need to pass only one duration time, two second. Now it's going to apply the transition effect, all of these properties. If I save this file and hob M cursor and hob cursor in this de, you can see the result. In the same time, it applies the smoothness in height width and background. If you want to use same duration for all of this effect, you can use this shorthand, all. This is it for this tutorial. In our upcoming tutorial, we are going to talk about transition timing function. Thanks for watching this video, state tune for our next tutorial. 5. CSS Transition Timing Function Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to talk about transition timing function. Using this function, you can control the smoothness of this transition. These are some common values related transition timing function, is linear, is, is out, is in out, bic baser. Also, we have three another value, but these are not so important. Our first value is is it's a default value. Specify a transition effect with a slow start, then first, then nd slowly. Our next value is linear, specifies a transition effect with the same speed from start to end. From beginning to end, it maintained the same speed. Our next value is is in. Specify a transition effect with a slow start, and our e out value is play the opposite role of is in. Specify a transition effect with a slow end, and our next timing value is e in out. Specify a transition effect with a slow start and end, and our last value is cubic basier. Let's you define your own values in a cubic basier function. You can set your own timing values. Without this six value, we have three another value, which is step start, step end, and steps. These are not so important, but it's good to know about it. Let's see how it's working practically. Here you can see, I open a website Q week pens.com. Here you can see the real time example of these values. Es linear e in is out and e in out. At first, I'm going to increase the duration time, duration to second. Then I'm going to start this example with default value. E. If I click, go button, you can see the result. Our next value is linear. If I click go button, you can see the result. Linear value maintain the same speed from beginning to end, and then come in. If I click go button, you can see the result. And then come out. If I click go button, you can see the result, and our last value is. Es in specified inout specified transition effect with slow start and slow end. Let me show you another example. As you can see, there are five different d, and I use five different timing function value for them. If I ber my cars are all of this item, you can see the result. This is for linear, and this is for e, and this is for. This is for e, and this is for. I hope you can understand the difference. Let's jump into the visual stdio creator and see how we can use it. As you can see on your screen, side by side, I open my visual studio cortor and my browser using Lipsever extension, and I already created estimL document named index dot estimL. As you can see, I already created d for this example. In our previous tuteral, we'll learn about transition property and transition duration. But in this Tutteral, we are going to learn transition timing function. So I'm going to call this property. Transition timing function. L et's start the practical with the default value, which is E. So type, es. If I save this file and hover my cursor into this de, you can see the result. This transition effect start with slow, then first, and then end with slow. This is the default value, and our next value is linear. Some linear. If I save this file and hover my cursor into this de, you can see the result. This transition effect maintained the same speed from beginning to end, and our next value is is in. Somehow to type is in. If I save this file and hover my cursor into the deep, I specify a transition effect with a slow start. Similarly, we have opposite value, is out. Some root t is out. If I set this file and berm cars into this box, as you can see, specify a transition effect with a slow end. Our next value is is in out. Some root t is in out. If I set this file, and once again, hover M cars into this d, you can see the result. It specify a transition effect with a slow start and end. Let's talk about another value, which is steps. Someo type steps. Here we can complete our transition with steps. Suppose I want to complete this transition in two steps. I want to pass two here. If I set this file and hopper my cars into this deep, you can see the result. As you can see in two step, it complete the transition. I I remove my curser, you can see the same effect. In two step, it complete the transition, and now I want to complete this transition in five Step. If I set this file and hover my curser into this box, you can see the result. In five steps, it completes the transition. This is the use quas of steps value. Most of the time, we try to avert this value. We do not use this val. But for education purpose, you should have knowledge about it. Our next value is step start. So I'm going to type, Step, start. If I set this file and hover my cursor into this deep, you can see in a single step it complete the animation. But if I use step end value, Steve, end and set this file, I I hover my cursor, it's going to start my animation after 2 seconds. Let me show you. So I'm going to hover my cursor into this deep. As you can see up to two second, it start the animation, and it completes the transition in one step. This is the use case of step end value. Let's jump into the last value, which is cubic baser. So type cubic baser. In Cuba basier, you can complete the animation in four step. When we use step value, in our transition, there is no smoothness. But in Qubic baser, we can maintain the smoothness of the transition. Suppose for our first step, I'm going to take 0.5 second. For our second step, I'm going to take 0.6 second, and for our third step, I'm going to take 1 second. For our fourth step, I'm going to take 0.1 second. If I save this file, and Ober my cars are into the red deep, you can see the result. It started slow and then end first. For our first save, it took 0.5 second, and for our second steve, it took 0.6 second, and for our third steve, it took 1 second, and for our last save, it took 0.1 second. This is a caso cubic vs value. You can change the duration as you want. I hope now it's clear for you what is transition timing function property. In our next tutorial, we are going to talk about transition delay property. Thanks for watching this video, stay tuned for our next Tutorial. 6. CSS Transition Delay Tutorial: Hello, guys, good to see you back. In this Tutorial, we are going to learn what is transition delay property. Basically, it's mean after how long do you want to start the transition? Let's start the practical and see how it's work. As you can see side by side, I open my visa studio coreor and my browser using Lipseer extension, and I open my previous estimate document. Let's use transition delay property. I'm going to tie transition delay, and I'm going to pass three second value, three S. If I set this file and Hoberm cars that are in this de, as you can see, after three second, it start the transition. Similarly, if I remove by cursor, as you can see, up three second, it complete the transition. You can set any time as you want. This is the use case of transition delay function. Now I'm going to use shorthand all of this property. As you can see, total use four transition property, transition property, transition, duration, transition, timing function, and transition delay. I want to make it one liner. For that, at first, I'm going to comment out this four transition properties. And then I'm going to call on the transition. At first, you need to declare the property name. In our case, w, sound paste w here. Then we need to pass transition duration value, which is two second, two A, and then come transition timing function, which is ese. And our last value is transition delay value, which is two second. Now, we don't need to use these four properties. Just you need to remember, we need to follow this sequence. First, unit to plus property, then unit to plus duration, and then unit to plus timing function, at last unit to plus delay. If I set this file and hobercur into this de, you can see up to two second, it start the animation. As you can see, it's worked perfectly. And now I want to tell you one important thing. This is not necessary that we use transition with only hover selector. You can use this transition when you load your page. Also one thing you need to remember, if we do not declare the property in our case with, so I'm going to comment out this. And then set this file, as you can see, it's not going to work properly. We need to declare the property before you use this property in our Huber selector, and you need to remember it. Now I'm going to use this transition with different pseudo selectors. So type active. At first, let's remove the delay. And then I'm going to set this file. If I hover my cars are in this deep, as you can see, it's not working, because our pseudo selector is active. We need to press mouse leak to run this animation. Let me show you. As you can see, I keep pressing my mouse leak and it's run my animation. When our mouse sick is active, then it's going to perform the animation. Otherwise, it's not work. So this is it for this tutorial. I hope now all the transition properties are clear for you. Thanks for watching this video, stay tuned for our next tutorial. 7. CSS Transform 2D Intro: Hello, guys, good to see you back. In this tutorial, we are going to learn a new property, which is transform. Basically, we are going to focus on to transformation. At first, let's see some example, what is to transform. Here you can see two example. This is the normal deep element, and this deep element is rotate clockwise 20 degrees. Using to transformation, we can rotate any deep, clockwise, otherwise, counter clockwise. Similarly, we have another example. This is the normal deep, and this deep element is skewed 20 degrees along the x axis and ten degrees along the y axis. So we can skew our element, rotate our element, scale our element, and many more. Let's see what are the values in two D transformation. As you can see, we have total 11 value in two D transformation. Translate, translate x, translate Y, rotate, scale, scale X, scale y, Q, QX, QY, and our last value is metrics. We have another value, which is default value, which is none. Using matrix property, you can use all of this value in one line. In this tal, I'm going to cover this four value, translate, translate x, translate y, and rotate. Let's start the practical and see how it's work. As you can see, side by side, I open my visual studio creator and my browser using Lip Server extension. I already created estil document named index dot STL. As you can see, inside my estil structure, I already created Dep element, and I set 200 pixel width and 100 pixel height, and also I set background color and border. At first, I'm going to start this transformation with rotate value. So rot transform property. And I'm going to use rotate value. Inside the parentheses, we need to pass degree parameter. Suppose I want to rotate this element 40 degree. So I'm going to pass 40 dg. If I save this file, you can see the result. Similarly, if I pass 90 degree and then save this file, as you can see, our deep element rotate 90 degree. Our rotate value is part of two transformation. It not only rotate our element, it also rotate our content. Not only that, you can use negative value also. Suppose I want to rotate it -60 degree, -60. If I set this file, you can see the result. If you want to flip this deep, you can use minus 180 degree, otherwise, 180 degree. If I set this file, you can see it flip our element. This is the use age of rotate value. Let's talk about our next value, which is translate. I want to type translate hair. And I'm going to set this file. As you can see, there is no changes. Now the question is, what is the meaning of translate? The translate method moves an element from its current position. As you can see, this is the current position of this element, and I want to move this element 100 pixel, x axis direction and 200 pixel y x direction. In that case, we need to use this value, translate. At first, we need to pass x xs direction, then we need to pass y x direction. At first, I want to move this element in 100 pixel x axis direction. I'm going to pass 100 px. This is for x xs parameter. Next, I want to move this element, 50 pixel, y x direction. I want to pass 50 px. If I set this file, as you can see, it moved the element from its current position, according to parameter, given for the x x and y xs. In xxs direction, 100 pixel, and in y xs direction, 50 pixel. Let's jump into the next value, which is translate x. So type, translate x, and Inset the parentheses, we need to pass only one parameter, which is x xs parameter. This function, moving the element along the x axis. If I set this file, as you can see, this is the exact position of this element because we do not pass any parameter here. Now I want to move this element, 200 pixel, x xs direction. I'm going to pass 200 here, Px. If I set this file, you can see the result. Similarly, we have another value for y x direction. So to type translate Y. As you can see, this is the exact position of this element, and now I want to move this element, 100 pixel at y x direction. So inside the parenthesis, I'm going to pass 100 pixel. If I set this file, you can see the result. It move our element 100 pixel at y x's direction. So this is it for this tutorial. In the next tutorial, I'm going to cover this scale properties, scale, scale x, scale y. Thanks for watching this video, state tune for our next tutorial. 8. CSS Transform 2D Scale: Hello guys, good to see you back. This is the second tutorial related to transformation. In this tutorial, we're going to learn this three value, scale, scale x, and scale y. Let's try to understand what is scaling and how it's work. Suppose this is our deep element, and this is exis direction and this is axis direction. If you want to decrease and increase the size of this element, in that case, you need to use scale value. Let's increase the size of this element. And to increase the size of this element, we need two parameter, xs parameter and y xs parameter. This scale method increase or decrease the size of an element. Let's see how we can use it practically. As you can see on your screen, side by side, I open my viso studio cooror and my browser using Lipsear extension, and I already create estimate document index two dot iML. So let's try to increase the deep element, 22 time of original id, and three time of original height. At first, I'm going to call our property, Name transform. Transform scale. At first, we need to pass xs direction value. In xs direction, I want to scale this element two time, so I want to pass two here, and I y axis direction, I want to scale it three time. I want to pass three here. If I set this file, you can see the result. As you can see, it scale our element, and it also scale our text inside this element. In the similar way, you can scale down the element. Let's back to the normal position. If I set this file, it is the normal size of this element, and now I want to decrease the deep element to be half up its original weight and height. For x axis direction, I'm going to pass 0.5. For y axis direction, also I'm going to pass 0.5. If I set this file, you can see the result. This is the scale of scale value, and our next value is scale x. Let me show you. Let's back to the default size, and I'm going to call scale x, I'm going to set this file. This x method, increase or decrease the width of an element. Suppose now I want to increase the deep element width two time. In that case, we need to pass only x x value, and I want to increase it two time. If I set this file, you can see the result. As you can see, it increase the width two time. If you want to decrease the width, you need to pass value from 0.1 between 0.9. Sound pass 0.5. If I set this file, you can see the result. It decrease the width of this element. Let's back to the default size of this element. And now our next method is scale y. I'm going to type scale y. This scale Y methode, increase or decrease the height of an element. I want to increase the height three time of its original size. So I'm going to pass three here. If I set this file, you can see the result. And in the same way, if you want to decrease the height, you need to pass value between 0.12, 0.9. Here, I'm going to pass 0.6, 0.6. If I set this file, you can see the result. It's scaled down the height of this element. This is the use case of scaled value. I hope now it's clear for you how it's work. In the next tutorial, we're going to learn this three value, Q, Q X, and Q Y. But before we are going to learn another property, which is transform origin. Thanks for watching this video, stay tuned for our next tutorial. 9. CSS Transform 2D Skew: Hello guys, good to see you back. This is the third video related CSS study transformation. In this tutorial, we're going to learn this three property, Q, Q X, and SQ Y. This method Qs an element along the x axis and y axis by the given angles. Inside this parameter, we need to pass angles. Let's start the practical and see how it's work. As you can see, side by side, I open my so studio creator and my browser using Lp Server extension, and I already create estemL document named index dot estemL. So first, we need to call the property name transform. Some to type transform. At first, I'm going to start this tutorial with Q x value. I'm going to pass Q x. Inside this parenthesis, we need to pass angle value. Using this value, we can change only x xs direction. If we use this value from this point, it's going to change the angle. Suppose I'm going to pass 20 degree. If I set this file, you can see the result. As you can see, from this point, it take 30 degree angle. Similarly, you can use negative value also. If I first -20 degree, and then set this file. As you can see, from this point, it rotate in the right side direction, and also our rotation angle is 20 degree. But in that case, -20 degree. As you can see, this rotation move only is direction, not y axis direction. Let's back to the default position, and I'm going to use sk y value. Q, y. Now the rotation work at vertical direction. If I pass 20 degree here, 20 DEG and set this file, you can see the result. From this point, it moved 20 degree y x direction. Basically, it's moved downward, and if you want to move it upward, you need to pass minus value. If I pas -20 degree and then set this file, you can see the result. I hope now it's clear for you how Qx and Q y property work. Let's talk about our next value, which is only Q. At first, I'm going back to the default position, and I'm going to type only Q. In this method in our first parameter, we need to pass x xs angle, and then we need to pass y x angle. At first, I'm going to pass 30 degree x xs angle. And then I'm going to pass 20 degree y axis angle. If I set this file, you can see the result. Not only that with positive value, you can use negative value also. Suppose I want to pass -20 degree in y x direction. If I set this file, you can see the result. This is up to you. How can you use these values? Let's talk about another property, which is related to de transformation, and this property name is transform origin. Now the question is, what is the use age of transform origin property? It is allow you to change the position on transformed element. What does that mean? Suppose this is our D element. If you remember the rotate value, then you can also remember the rotation point, which is center of this element. This rotation point is center from x xs, also y xs. But I don't want to rotate my element from middle point. I want to change the rotation point. I want to rotate this element from this point, means leptop corner. Similarly, if I want to rotate from this point, then this is our right bottom corner, and this is our lept bottom corner. Also, this is our right top corner. You can take the point by the name. Otherwise, you can take percentage or pixel value. If you want to take the rotation point inside of this deep element, something in that position, yes, you can. According to hit dot position, you need to take 20% in axis direction, and also you need to take 30% in y axis direction. Just one thing you need to remember, using this property, you can change the position of transform element. Let's back to the visio studio creator and see how it's work. As you can see, this is our normal deep. I rotate this deep from the center position to 20 degree. But if I change the transform origin position from this point, some to tie, transform origin. And I'm going to pass from x axis left position, and from axis top position. So to pass top. Before I set this file, I want to back to this deep in the normal position. I'm going to comment out these two lines. If I set this file, now it's back to the normal position. Now I'm going to uncomment this lines, and now I'm going to set this file, focus in this corner. If I set this file, you can see the result. From this corner, it move to 20 degree. Let's increase the rotation value. So I'm going to type, 80 degree. If I set this file, you can see this result. From this point, it rotate 80 degree. Let's back to the default position. Once again, I'm going to change the rotation point. So I'm going to type right bottom. Now from this point, it's going to rotate our element. If I set this file, you can see the result. Now the rotation origin point is this point. Let's back to the default position. Once again, I'm going to change the rotation origin position. But this time, I'm going to use any corner. Now I want to rotation point, something in this place. X axis direction, I'm going to pass 20%, and for y axis direction, I'm going to take 40%. If I set this file, you can see the result. From this point, it rotate the element, 80 degree. And if I pass x xs value zero and yx value, 100 and then set the file, and Also I'm going to change the rotation angle, 20 degree and then set this file again, as you can see, now our rotation point is lap bottom corner. Because in xs direction, we use zero value, but in y axis direction, we use 100% value. That's why our rotation point is lap bottom corner. Now the question is, what is the use case of this property? Basically, this property is used for animation. As you know, this is our CSS animation tutorial. That's why we need to learn about it. This is it for this tutorial. In our next tutorial, we are going to learn our next value. We are going to learn our last value, which is metrix. Thanks for watching this video, state tune for our next tutorial. 10. CSS Transform 2D Matrix: Hello, guys, good to see you back. This is the last tutorial related to transformation. In this terial, we are going to learn matrix value. Now the question is, what is matrix? The matrix method combine all the two transform methods into one. This method take total six parameter, containing matrix function, which allow you to rotate, scale, move, and skew elements. Especially if we do not use this element too much. So let's see how it's work. As you can see, side by side, I open my videos to your creator and my browser using Lipseer extension, and I already create a estimL document named Index four dot estimL. At first, I'm going to call the property name transform, and I'm going to call our value matrix. At first, we need to pass scale x value. I'm going to pass one. In our excess direction, I don't want to scale it. That's why I pass one value. Next, we need to pass sky value. I'm going to pass -0.3. And then we need to pass Q x value. Here, I'm going to pass zero. Next, we need to pass scale y value, and here I'm going to pass one. Now we have only two parameter left, translate x and translate Y, for translate x, I'm going to pass zero, and for translate y, I'm going to pass zero. If I set this file, as you can see, it is just skew our deep element -0.3 degree. If you want to scale this element two time, you need to pass scale x two and scale y two. If I set this file, you can see the result. With Q, it also scale our element. This is the use case of this matrix method. Now, let's use all the two transformation value one by one with hover effect and try to create a hover animation. I'm going to comment out this line, and at first, I'm going to create the pseudo selector, D colon hover. Then inside the calibraces, I'm going to use transform property, and I'm going to tie transform. At first, I'm going to use scale value, and I want to scale this element overall two time, so I'm going to pass two here. If I set this file and hover my cursor into this de element, you can see the result. As you can see, in a one step, it complete the transition. To provide a smoothness in this transformation, we need to use transition property. I want to tie transition here, first, we need to declare the property name and our property name is transform. Then we need to declare the transition time, which is 1 second. If I set this file and hover my cursor in this de element, you can see the smoothness of this transformation. But in this example, our deep element scale from the center position. But now, I want to change the transform origin position. I'm going to tie, transform origin. Left top. If I set this file, and whoever my cars are in this deep element, as you can see, from this point, it scale our deep element. Let's use our next two d transformation property, which is translate. Some to duplicate this line, and I'm going to comment out the previous one. Here I'm going to tie, translate. And I want to move our deep element, 200 pixel, xs direction, and one pt pixel, y x direction. If I save this file, and ber macers in this deep element, you can see the result. It move our deep element, 200 pixel, x axis direction, and one pt pixel, y x direction. Let's use our next value, which is skew. Once again, I'm going to duplicate this line and comment out previous one. Here I'm going to tie SQ. And I xs direction, I want to rotate it 20 degree, and in y xs direction, I want to rotate it ten degree. If I set this file and hober Micers are into this deve, you can see the result. As you know, our transform origin is left off. When I hober macers are into this deve, you can see the result. I hope now it's clear for you, what is two d transformation and how we can use it in our animation. Thanks for watching this video, in our next tutorial, we are going to learn three d transformation, state tune for our next tutorial. 11. CSS Transform 3D Tutorial: Hello, guys, good to see you back. In this tutorial, we're going to start three d transformation. In our previous chapter, we learn about two d transformation. But in this chapter, we're going to learn three d transformation. Without three d transformation, we cannot imagine the animation. So let's see the values related three d transformation. As you can see, we have totaled ten value related three d transformation. Rotate x, rotate, rotate z, Ptate three, translate, translate three, scale three D, scale, prospective and matrix three. In rotate x method, we need to pass angle value. Similarly, we need to pass angle value for rotate y. But for rotate three D method, we need to pass total four parameter, x, y, z, and angle value. In this tutorial, we are going to cover this four method, rotate x, rotate, rotate, and rotate three D. Let's see how these methods are worked in real example. As you can see, we have total four d element in our document. And I sat for different rotate value for this example. If I hover my cursor rotate x d element, you can see the transformation. In this way, rotate x worked. Here we use the rotate x value with prospective. If we use rotate x value, it draw a line in x excess direction from this point to this point. Let me show you the real example. Assume that it is a deep element. If I use rotate x value, it's going to create a line from this point to this point. This is our transform origin line. If I pass positive value, something 40 degree, then it's going to rotate our element this way. If I pass -40 degree, then it's going to rotate this element this way. Can you see my face? Absolutely not. But if I use 90 degree angle, then it's going to rotate this element like this. Now the element is not visible properly. But if I rotate it 180 degree, now you can see the opposite part of this element. In that way, rotate value work. Let's talk about our next value, which is rotate. If I ver micas are in this deep, you can see the effect. Also, we use prospective value with that. That you can understand this value easily. If we use rotate y value, it draw a line from this point to this point, mean y xs direction. That's why we call it rotate Y. Using angle value, you can twist it b site, otherwise, right side. Let's see the example, how it's work. If we use rotate Y value, it's going to draw a line from this point to this point means yx direction. This is our origin line, and by default, it's always came to the center. If I pass positive 40 degree parameter, it's going to rotate this element this way. Similarly, if I pass -40 degree, then it's going to rotate this element this way. If I rotate this element, 90 degree, now the whole element is less visible and you can see my face. If I rotate it, 180 degree, you can see the opposite part of this element. Our next value is rotate Z. If I hover my cursor on this de, you can see the result. It define three d rotation along the Z axis. Let's see how it's work. This is the example of z x rotation. It define three d rotation along the z axis, and by default, origin point is always center, and using positive or negative value, we can rotate it this way, otherwise, that way. Our last and final value is rotate three d. It's define complete three rotation. If I hover my cursor on this deve, you can see the result. At the end of this example, I will give you the demonstration how it's work. Let's start the practical with rotate x value. As you can see, side by side, I open my visuo studio curator and my browser using Lip server extension. I already create a estimL document named demo Dot estiml. As you can see inside a parent container, I create a box container, and I set similar heighten width for our parent container and our child container. For parent container, I set a gray background color, and for child container, I set chocolate background color. Let's call the transform property and use rotate x value. I'm going to call transform rotate x, and here we need to pass rotating angle parameter. I'm going to type for t degree. If I set this file, here you can see the result. Hey, it's worked properly, but you cannot feel the change too much. For this, I'm going to use prospective and transition that you can understand it very easily. I'm going to use it with hover selector, dot, box, colon, hover. Is the calibraces, I'm going to call this property. And I'm going to call transition property for smoothness. Transition, and our property name is transform and our transition duration is 1 second. If I sat this file and hover my cars are on this deep element, you can see how it's work, but it is not clear at all. That's why I'm going to use another value, which is prospective. It's going to give you the three D, and I don't going to explain how prospective work. For prospective, I will give you a separate video. Let's use the prospective value. So type prospective. And inside the parenthesis, we need to pass the value, and our value is 200 pixel. If I set this file, and then my cursor on this develement, you can see the result, how it's work. Assume that it create a line from this point to this point means x xs direction. Using this value, you can twist it upward otherwise downward. This is the use case of rotate x value. Let's change the rotation angle, 90 degree. If I set this file and hover Mi cursor on this develement, now you can see the result. Now it's completely invisible. If you want to turn it around completely, then you need to pass 180 degree value. One, 80 degree. If I set this file and hover my cursor in this deep, you can see the result. As you can see, it rotate our deep element, 180 degree. Not only that, also you can change the transform origin position. Let me show you. I'm going to call transform origin property. Transform origin. Now I don't want to rotate this element middle of this element. I want to rotate it from this corner. In that case, we need to use right bottom value, right bottom. Before I set this file, also I'm going to change the rotation angle, which is 30 degree. If I set this file and Her my cursor on this develement, as you can see from right bottom corner, it rotate 30 degree. I hope now it's clear for you how rotate x value work. Let's jump into our next value, which is rotate Y. But before I'm going to comment out this line. Here, just I'm going to type rotate y. If I set this file and Her my cursor on this develement, you can see the result. As you can see, it divide our element and draw a line from this point to this point. It's been y x's direction. And from this line, you can twist it p side otherwise right side, according to the angle value. Everything is similar to rotate x value. Just draw a line and divide this element from this point to this point at y x direction. That's why we call it rotate Y. Let's talk about our next method, which is rotate Z. Sound type, rotate Z. If I set this file and hover my cars on this deep, you can see the result. I draw a line in ZD x. I want to say middle of this de element. Let me show you example and see how it's work. Here you can see a picture, and if you use rotate x, it draw a line from this point to this point. Using this value, you can rotate your element upside or downside. If you use rotate y value, you can rotate your element p side or right side. If you use rotates that value, let me show you how it's work. I hope now it's clear for you how rotates that value work. Let's talk about our last value, which is rotate three D. At first, let's see the real demonstration. If we use rotate three D, we can use all the rotate value at ones. This line is for x xs rotation line, and this one is for y x, and this one is our zx line. Now I'm going to rotate it in x xs direction. At the same time, I'm going to rotate it in a y ax direction, and this line is for zerx direction. At the same time, we can rotate it in a z x direction. Basically, it's defined three D rotation. At first, I'm going to call the value, rotate three d, and then inside the parentheses, you need to pass total four parameter, x x, y x, z x, and angle. You can specify the axis of rotation using a number for the first three arguments. But for fourth argument, you need to specify the angle value. For x xs, I'm going to pass two, and for yx, I'm going to pass minus one minus one. Similarly, for z x, also I'm going to pass minus one. But in our fourth parameter, we need to pass angle value, so to type 45 degree. If I set this file and hover my cur on this development, you can see the result. This is the use cage of rotate three D method. This is it for this tutorial. In our upcoming tutorial, I'm going to cover these two values. Translate Z and translate three D. Thanks for watching this video, 12. CSS Transform 3D Tutorial Translate: Hello guys, good to see you back. In this tuterial, we are going to learn this four translate method, translate X, translate Y, translate, and translate three t. We already learned about this two value in our previous tuterial. But here, I'm going to use it with three transformation. Let's see how it's work. As you can see, side by side, I open my visoto correator and my browser using Life Sever extension, and I already create estimL document named index dot estemL. As you can see inside the parent container, we have a box container. Let's use our first value. But before I'm going to call the transform property, somehow to type transform. And our first value is translate x. Someone to type, translate x. Inside the parenthesis, I'm going to pass 200 pixel. If I set this file and Hoberm cursor into this devlement, you can see the result. It's move my element, 200 pixel in x x direction. And if you want to move it opposite direction, in that case, you need to pass -200 pixel. If I set my file and berm cursor in this box, you can see the result. We already learn it in your previous material. So let's make this transition three d. So I'm going to pass another value, which is prospective, prospective, 200 pixel. Also I'm going to pass rotate y value, rotate y, and here I'm going to pass 30 degree. If I set this file and hover my cursor in this deep element, you can see the result. As you can see, it move our deep element, also, it rotate our deep element, and you know we use prospective, that's why it give you three D look. Let's talk about our next value, which is translate Y. So to use translate Y, and here I'm going to use positive value. If I set this file and berm curser on this de element, you can see the result. Let me use rotate x value. So ty, rotate x. If I set this file and berm curser on this D, you can see, now it's look more attractive and dynamic. Let's use our next property, which is translate Z. So, translate Z. If I pass 200 pixel, Then set this file. If I hober my car on this de, as you can see, it's not working. But we already set translates that value on this D. Let's use other value with that. I'm going to use rotate value with that, rotate, y, 60 degree. If I set this file and hober my carer on this D, you can see the result. But it's look pretty similar to translate x, but it is not. Let me show you. Let me use prospective value with that. Some type prospective, prospective, 900 pixel. If I set this file and hober my car on this deve, you can see the result. Let me show you the real demonstration. Then you can understand it properly. Suppose this is our deep element. At first, I'm going to rotate this deep element. If we use translates that value, then it's moved like this way. I hope now it's clear for you how translate Z value is work. Let's talk about our last value, which is translate three D. Some to type, translate three D. Here we need to pass total three value, x x, x, and zx. Suppose for x x, I'm going to pass 50 pixel, and for x, I'm going to pass 50 pixel also. For zerx, I'm going to pass zero pixel. If I set this file and berm cars on this D, you can see the result. And if I increase, translate Z value, suppose I'm going to type for typic cell and then set this file and over my cursor on this development, you can see the result. At the same time, it's move on x xs direction, y xs direction, and z x direction. I hope now it's clear for you what is translate three D value. This is it for this tutorial. In our upcoming tutorial, we are going to cover these two values, scale three D and scale Z. Thanks for watching this video, stay tuned for our next tutorial. 13. CSS Transform 3D Tutorial Scale: Hello, guys, good to see you back. This is the another Tutorial related three d transformation. In this tutorial, we are going to learn these four methods, scale X, scale Y, scales, and scale three. We already learned about scale x and scale Y method in our previous tutorials. But once again, I'm going to repeat this method in this tutorial. But the most important method for three D is scale ight. It defines a three D scale transformation by giving a value for the zx, and our last method is scale three D. Using this method, we can use three different values at once. Let's start the practical and see how it's work. As you can see, side by side, I open my VSO Studio code editor and my browser using Lp Server extension, and I already create a estemL document named index dot eTML. At first, I'm going to use the property name transform. So to type, transform here. Our first is scale x, Some type, scale x, scale x, and I want to scale this element two time in x excess direction. I'm going to pass two here. If I set this file and berm cars in this development, you can see the result. Similarly, we can use scale Y value. I'm going to change scale y. If I set this file and hover my cursor on this development, you can see the result. Because we do not provide any transform origin point, that's why it's scale middle of this element. It is the default origin position. But if we use transform origin value with that, let me show you. And then set this file and hobercars are on this development, you can see the different result. Let's talk about our most important value, which is scales eight. But first, I'm going to comment out this line, and I'm going to t scales eight here. Scales 82 time. If I save this file and Hoberm cars are on this development, as you can see, there is no changes because this value only work with three d transformation. We need to give it three d. I'm going to comment out this line, and I'm going to use this value with prospective and rotate y. Also, I'm going to commend this line. If I set this file, and hover my curser on this development, now you can see the result. If I increase the scales that value, sum type seven here, and set this file and hover my curser on this development, now you can see the difference, how it's work. Similarly, if I decrease the scale value, some type 0.5, and set this file and hover my curser on this development, you can see the result. I hope now it's for you, how scales that method is worked. Let's talk about our last method, which is scale three d. Some type, scale three d here, scale three D. Using this method, here we need to pass total three value. Scale X, scale Y, and scales eight. Using that, we can use three different value at once. For x xs, I want to scale it two time. For y xs, I want to scale it three times, and for zer x, I want to scale it five times. If I set this file and ber my cars on this development, you can see the result. At first, it scale this element two time in x direction, then three time in Y x's direction, and then five time in zerox direction. This is the U sketche of scale three d value. I hope now it's clear for you. This is it for this terial. In the next uteral, we're going to learn about a new property, which is prospective. Thanks for watching this video, stay tuned for our next uteral. 14. CSS Perspective Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to learn a new property, which is Sess perspective. In our previous tutorials, we already learned about it. But in this tutorial, we are going to use it individually. But before we start the practical, let's see some examples. Here you can see this is the example of rotate, and this is also the example of rotate. But the differences, for this element, we use prospective. That's why it's provide three D. Similarly, this is the example of y x rotation. For our first example, we do not use prospective. But for our second example, we use prospective. That's why it's provide three D. If we use prospective, you can clearly see the rotation, and if we do not use prospective, you cannot understand the rotation. Let's try to understand it with more details. Suppose you are watching a projector screen from this point. You can say the distance and angle point of view, are called prospective. It will look bigger if you look closer, and if you look at it from a distance, it will look smaller. Let me show you the real demonstration. Suppose this is our deep element. If you look at it closely, it will look bigger. And if you look at it from a distance, it will look smaller. This is called prospective. It looks small and big despite not being resized. I hope now it's clear for you. Prospective comes with another property, which is prospective origin. By default, it's come with center. But you can change the prospective where you want. Let's try to understand prospective origin with detail. Suppose this is your room. If you look at it from the center position, you can see all the walls and floor clearly. This is your top floor, this is your bottom floor. This is your right side wall, and this is your left side wall, and this is your background wall. But if you look at your room from the left top corner, I want to say from this corner, then you cannot see the left and top floor clearly. Similarly, if you look at your room from this position, means top position, then you cannot see the top floor clearly. You can see the bottom floor, background wall, right side wall, and left side wall. Because your prospective origin position is top. Similarly, if you look at your room from the right top corner, you cannot see the right wall, and also your top floor is barely visible or not. Because your prospective origin is right and top. But if you look at your room from the right side by mistake, I type right wall in left position. If you use right side prospective origin, then you cannot see the right wall properly. You can see the background wall, you can see the bottom floor, you can see the top floor, and also you can see the lap side wall, but your right side wall is not visible. If you use bottom right prospective origin, then also you cannot understand the right wall. As you can see, also right wall is not visible. With that, bottom floor is rarely visible. Similarly, if you look at your room from the bottom position, then you cannot see the bottom floor properly. If you look at your room from let bottom corner, then you cannot see the left wall. Also you cannot see the bottom floor completely. If you used only let prospective origin, then you cannot see the lept wall. You can see right wall, you can see background wall, you can see bottom floor, also you can see top floor, but you cannot see lept wall. These are all origin values. Also you can use percentage value with that. With prospective, you can change the prospective origin. Let's start the practical and try to understand how we can use prospective and prospective origin property. As you can see, side by side, I open my visual studio Cortor and my browser using Lipseer extension, and I already create a estemL document named Index dot estemL. As you can see, there is a deep element, and now I want to rotate this deep element when I hover my cursor on this element. Here I'm going to use transform property, so type, transform. Transform rotate, rotate x, and I want to rotate it up to 50 degree in xs direction. If I set this file and ber Micas are on this deep element, you can see the result. As you can see, it rotate our element, but it is not clear because we do not use any prospective value. In our previous tterials, we used prospective as a transformation value. But now I'm going to use prospective property, and we need to use this prospective property in our base container, not the child container. Here we need to tie prospective. And I'm going to pass prospective 800 pixel. If I set this file and hover my cars are on this development, now you can see the three D look. In our previous tterials, we use prospective as a transform value. Just you need to remember, prospective give the element three D look. Also, you need to remember, if you used prospective property individually, then you need to use it in the parent container, not the child container. Now, let's change the prospective value. Suppose I'm going to pass 100. As I told you earlier, decreasing the value of the prospective will make things look bigger. If I hover my cursor on this development, you can see the difference. Now it's look bigger because we watch this element very closely. That's why it's look bigger. In the opposite way, if we increase the prospective value, 1,200 pixel, and then set this file, and hover my cursor on this development, you can see the result. Now you can see the smaller object. Because we know that an object looks small when we viewed from a distance. As you can see, now the distance is 1,200 pixels. For now, I'm going to type 800 pixel prospective. Let's talk about prospective origin and how it's work. At first, I'm going to call this property, which is prospective origin, prospective origin. By default, as value is center and y axis value is center. So group type, center and center hair, center center. If I set this file and hobercars are on this development, as you can see, from the center point, it rotate our element. As you can see, there is no changes because this is the center center position. At first, I'm going to use right value, prospective origin, right. If I set this file and Hobermcars are on this development, you can see the result. As you can see, our element doesn't overflow from the right side, because now our perspective is right side. That's why we cannot see the right wall. Similarly, if we use left veluft, and set this file and Huber micas are on this de element, now you cannot see the left wall. As you can see, our element not overflow from the left side, but it overflow from the right side. If we use any cube shape, then you can understand it properly. You can try all the origin value one by one. Not only that, you can use percentage value also. We are going to learn all of these when we are going to work with real projects. This is it for this tutorial. Thanks for watching this video, state tune for our next Tutorial. 15. CSS Transform Style Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to learn a new property related Sess animation, and the property name is transform style. Basically, this property work with transform property. Let's learn more about it. The transform style property specified how to nestate elements are rendered in three D space. And basically, this property come with two value. Our first value name is flat. It specified that child element will not preserve its three D position. And this is the default value. The main and important value is preserve three. Specifies that child elements will preserve its three D position. Basically, I want to say, if we use preserve three D value in parent element, then our parent element work like a three D object. Let me show you the example. Here you can see that we have animated a child element. As you can see the smaller deep element passing through the larger deep element. As you know, larger dev parent element. If we use preserved three D value, then we can perform this kind of three D effects. If we do not use the preserved three D value, let me show you. Now you can see our parent element do not act like a three D element, and our child element cannot pass through the parent element. So this is the use gage of transform style property. Let me show you another example. Here you can see a parent dive, and inside the parent dive, we have a child de, and I rotate our child de 40 degree at y axis direction. And by default, our parent de transform style came with flood value. That's why our parent de do not act like a three D object. But if we use transform style property and use preserve three D value, then our background deve act like a three D object, and our child deep moving past through the background element. Without wasting your time, let's start the practical. As you can see, side by side, I open my Visor studio creator and my browser using Lp Server extension, and I already create STL document named index dot STL. Here you can see total two de element, parent element and our child element. As you can see, we already rotate our child element 50 degree at xs direction, and I already use prospective property in our parent element, and I set prospective value, 800 pixel, and now I want to rotate the parent de element. I'm going to use transform property in our parent container, transform. Rotate y, and I want to rotate it 30 degree at y's direction, 30 degree. If I set this file, you can see the result. Yes, it's rotate our element, but it did not provide any three d look because we do not use any transform style property. I'm going to use transform style property, transform style. By D fall, this property came with flat value, but I'm going to use preserve three D value. If I set this file, now you can see the result. Now you can see our child element pass through the parent element, and you need to remember, you need to use this property in your parent container, not the child container. If I turn on my developer toolbar and select this element, as you can see, our transform rotate x value is 50 degree. Hey, this is our child element. If I increase the rotation angle, you can see the transformation. If I decrease the rotation angle, also you can see the transformation. Let's rotate the parent container. I'm going to select parent container, and I'm going to rotate this parent container. If I rotate the parent container, you can see the three d. Now you can clearly see our child element pass through the parent element. This is the use kage of transform style property. Now, let's change the transform origin of our child element. Amo type transform origin and Amo type bottom. If I set this file, now you can see the result. From bottom, it rotate our child element, 50 degree. Let me show you clearly. If I increase the rotation value or parent element, you can see it clearly. As you can see, from bottom side, it rotate our element. This is it for this tutorial. I hope now you understand what is the uskazo transform style property. Thanks for watching this video, stay tuned for our next tutorial. 16. CSS Backface Visibility Tutorial: Hello, guys, welcome back. Once again, I'm come with a new tutorial, and in this tutorial, you're going to learn a new property, which is backface visibility. You need to use this property with transform property. Before we start the practical, let's try to understand what is backface visibility. The backface visibility property defines whether or not the backface of an element should be visible when facing the user. Now the question is, what is back face? The back face of an element is a mirror image of the front face being displayed. Suppose inside this deep element, you type hello world. If I rotate it 180 degree, then you can see the backface of an element. As you know, it mirror your element. Also you can see the text reflection. This property is useful when an element is rotate. It let you choose if the user should see the backface or not. Suppose you don't want to show the backface of an element. Using this property, you can control it. And our backface visibility property come with two values, visible and hidden. Let me explain it with three D object. As you can see on your screen, here is a three D cube. If you use hidden value, then you cannot see the opposite part of the sube. But if you use visible value, then you can see the other part through this cube. This is the main difference of these two value. Let me show you another example. As you can see on your screen, there is two de element, and I use transform property both of this element. And as you can see, we use rotate y value. If I bers in our first de element, you can see you can see the back face of our first element. As you can see, it mirror our text. But I don't want to show the back face when I rotate our element. So in this element, we use backface visibility property. So I I ber my cursor, now you cannot see the backface of this element because we use hidden value for this one. Let's start the practical and try to understand how it's work. As you can see, side by side, I open my viso so Cortor and my browser using Lipseer extension, and I already create a estimL document named index dot STML. As you can see in my browser, we hettal two deep element, container, and box. And as I told you earlier, if you want to use backface visibility property, then also you need to use transform property. So inside the over selector, I'm going to type transform. Transform rotate y, and I want to rotate it 80 degree. If I set this file, and Hb M cars are on this development, you can see it rotate our element. Also, you can see the miro text, and now I'm going to use our new property, which is backface visibility. I have to type back face visibility. First, I'm going to use visible value. If I set this file and Hoberm cars are on this development, you can see the backface. But if I use hidden value, let me show you and set this file and Huber Makar on this deve element. Now you cannot see the backface of this element. This is the use case of backface visibility property. This is it for this tutorial. From the next Tutterial, we are going to learn Cases animations. Thanks for watching this video, state tune for our next tutorial. 17. CSS Animation Tutorial Part One: Hello, guys, good to see you back. Finally, we are going to learn CSS animation. You can animate any est element using CSS animation. Let's see an example. As you can see, there is an deep element. It's automatically animating without mouse hover. It's convert rectangle to a circle and then it's convert circle to rectangle. This is the little example of animation. It's work automatically. You don't need any hover effect. Let's see what type of property we have in CSS to create this animation. As you can see, we have total nine properties related CSS animation. Our first property name is animation name. Using this property, you can define a name for the animation. Then come animation duration. Using this property, you can define how long you want to run this animation. Then come animation delay property. It specify a delay for the start of an animation. Then come animation iteration count. It specify the number of times an animation should be played, and our next property is animation direction. It specified whether an animation should be played forwards, backward, or in alternate cycles, and then come animation timing function. It specify the speed curve of the animation. Our next property is animation fill mode. It specify a style for the element when the animation is not playing. We are going to learn about it in our last tutorials. Our next property is animation play state. It specify whether the animation is running or pause, and our last property is animation. This is the shorthand property. You can use all the properties value at once using this property. We are going to learn all these properties one by one. Now, to use all these animation properties, you need to create a selector, and the selector name is at the rate key frames. At first, you need to type add the rate keyframes, and then you need to provide any animation name. Just you need to remember, do not provide any space in this name. You can provide hyphen. You can use underscore or camel case also. But do not provide any space. Then inside the clivrass, you need to provide two different keyword from and two. It's been from where you want to start the animation, and using two keyword, you need to provide the animation end point. Inside the calibraces, you can use CSS property. Suppose you want to change container width. Yes, you can. There is another method that you can use it. You can use percentage for same job. You can replace starting position with 0%, and similarly, you can replace en position with 100%. Both of these statements going to return, same result. But here you can use any percentage value 0-100. Suppose you want to change the color at animation starting point, and also you want to change the color at 20%. You can provide multiple value if you use this method. Without wasting your time, let's study practical and see how it works. As you can see, side by side, I open my visor sto curator and my browser using Lp Saver extension. Also you can see, I already created estemL document named index dot estel. As you can see, there is a deep element and the className is box, and I already style this deep element with 250 pixel, height 200 pixel. I also align this deep element middle of this webpage. Now I want to animate this deep. I want to transform this rectangle into a circle. With that, I also want to change the color without using Over selector. I'm going to use different Css animation properties. At first, I'm going to create Keyframe selector, at the red key frame. After Kefam selector, we need to provide an animation name. For our animation, I'm going to take example. Then inside the calibraces, we need to use two keywords from and two from and then I'm going to use two. From starting point, I want to say border radius zero, some type, border radius property. Border radius 0%. At the end of this animation, I want to change border radius 50%. Border radius 50%. If I set this file, it's not going to run the animation because we need to link this animation name with this box. For this, I'm going to take a property, which is animation name, animation name, and our animation name is example. Using this method, you can use this keyframe multiple times, and you don't need to create this animation over and over again. Now, with animation name, also, you need to declare the animation duration time. I'm going to call another property, which is animation duration. For 2 seconds, I want to run this animation. Here you can use second or millisecond value also. If I save this page, you can see the animation here, but it run our animation for only one time, and it take two second to complete this animation. Now I decide to run this animation for five time. For this, we need to use another property, which is animation iteration count. So type, animation iteration count, and I want to run it five time. That's why I pass five here. If I save this file, as you can see, it run our animation five time. Three, four, and five. After complete the term, it stop executing our animation. If you want to run this animation forever, you need to pass infinite value here, some type infinite. If I set this file, as you can see, now it's run our animation forever. I don't want to run this animation forever, so I want to pass three value here. I want to run it three time. Now, as you can see, after complete the animation, it back to the previous position in a one step. When it returned from end value to start value, as you can see, there is no transition. In a single step, it completes the animation. To provide the smoothness, we need to use another property, which is animation direction. So type animation direction. And I'm going to use alternate value. If I save this file, now you can see the smoothness, when is back to the normal position. If I run it infinite time, you can see the smoothness. As you can see, when it back to the start position, there is a smoothness. Now, let's talk about animation direction property. Basically, animation direction came with four value, normal, reverse, alternate alternate reverse. Normal is the default value. The animation is played as normal. It work forwards. In the opposite way, reverse work backward. If you use reverse value, the animation is played in reverse direction. Then come alternate value. If you use alternate value, at first, it played forward, then it play backward. Our last value is alternate reverse. In that case, the animation is played backward first, and then forward. You already learned about alternate value. It's move from start position to en position, then back to the Emposition to start position. Our next value is reversed. Let me show you. If I use this value and then set this file. As you can see, the animation is starting from circle, and then convert to a square. Let's talk about our last value, which is alternate reverse. If I use alternate reverse value, and then set this file. As you can see, the animation is played backward first, then forwards. This is the use case of animation direction property. For now, I'm going to use alternate value. If I set this file, you already learned about it. This is it for this tutorial. In the next tutorial, I'm going to show you the different methods of key frames. Thanks for watching this video, state tune for our next tutorial. 18. CSS Animation Tutorial Part Two: Good to see you guys. In this tutorial, I'm going to show you the second method to run the animation. In our previous tutorial, we used from an two keyword. But in this tutorial, we are going to use percentage value. So Without wasting your time, let's back to the viso studio Corator. As you can see, side by side, I open my visor studio creator and my browser using Life Sever extension, and I open my previous estel document. As you know, from starting position, so I'm going to replace from with 0% 0%. And you know two k word our position. So I'm going to replace two k word with 100%. So if I save this file, as you can see, it's work the same way. Now I want to change the background color at the end position. So I'm going to use background property, background, and our background color is ate. If I set this file, as you can see, with shaped transformation, it's also changed the color. As you can see, for this animation, we use total four different CSS animation properties, Animation name, animation duration, animation iteration count, and animation direction. Now I'm going to show you how can we use shorthand of this animation. I want to say, how can we use this four property value in a single line. For this, we need to call other animation property, which is animation, Animation. At first, we need to pass the animation name. As you can see, our animation name is example. So to copy the name and paste it here. Then we need to pass the animation duration time. As you can see, our animation duration time is two second, sound to pass two second. Remember, you need to follow the sequence, and then I'm going to pass iteration count value, which is infinite. Next, I'm going to pass animation direction value, which is alternate. For now, the four exter lines are not needed, so I'm going to comment out this lines, and I'm going to save this file. As you can see, it's worked perfectly. It works the same way. And now I'm going to talking about another new property, which is animation delay. For this, I'm going to comment out this line and uncomment this ones. After duration property, I'm going to type animation delay. Here I'm going to pass three is, means three second. You also can take millisecond value. It's mean if I repress this file, our animation will be started after 3 seconds. Let me show you. Some to set this file, as you can see, after 3 seconds, it start our animation. This is the use case of delay property. At last, I'm going to use another property, which is animation timing function. But before I'm going to show you the values related CSS animation timing function. Basically, we have total six value, is linear, is in is out, is in out Q week baser. If you use is value, it specify an animation with slow start, then first, then end slowly. This is the default value, and our next value is linear. It specify an animation with the same speed from start to end. Then come our third value, which is is in, specify animation with a slow start. In the opposite way, we have another value, out, specify an animation with a slow end. Our fifth value is is in out, specify an animation with a slow start and end. And our last value is Q weak vesier. You can define your own values in a Q we sier function. Let me show you the real example how they works. Here you can see the elements with different timing function values. Linear is in is out and is in out. As you can see, we use same animation duration time for all of this. But as you can see, they are work in different way. Their speed is not the same. As you can see, linear maintain the same speed from start to end, and then come our next value, which is ease. As you can see, it start with slow then first and end slowly, and then come. It specify the animation with slow start. And then comes out. It specify the animation with slow end, and our last value is e in out. It specify animation with slow start and slow end. This is the different between all timing function values. Let me show you how we can use it practically. So I'm going to call our property name, which is animation ting function. Animation ting function. At first, I'm going to use e value. Some o t e. If I save this file, as you can see, it starts with slow, then first and n slowly. And this is the default value, and I'm going to use our next value, which is linear. Smot Linear. If I save this file, as you can see, it maintained the same speed. You cannot understand the difference in this example. You can understand it properly when we start our exercise and project, and then I'm going to use our another value, which is is in. If I save this file, as you can see, it's specify animation with slow start. Our next value is is out. Some type is out. If I save this file, as you can see, it's specify animation with slow end. Our last value is is in out. Some type is in out. If I save this file, as you can see, it specify the animation with slow start and slow end. And now I'm going to use our last value, which is Q basier. I'm going to tie Qb basier. Here you need to pass total four value, not more than four value, not less than four value. At first, I'm going to take 0.1 value, and then I'm going to take 0.4 value. Next, I'm going to take 1.0 value. Then come 0.1 value. It's going to cover the animation with four step. For our first t, it's going to take zero point once again. For our second step, it's going to take 0.4 second, and for our third step, it's going to take once again. For our last t, it's going to take zero point once again once again. If I set this file, you can see the result. After 3 seconds, you can see the animation pattern. With this value, you can complete your animation in a fourth step. Also you can use all the step as a shorthand. For this, you need to use this value in third position. First, you need to pass animation name, then duration time, then timing function, then dela value, then iteration count, and then animation direction. Don't worry about it. We're going to learn all of these when we start our projects. Now I'm going to change color at 50% of animation. I want to say 50% position of animation. 50% inside the clisis, I want to change the background color, background, Blue. If I set this file, as you can see, at the 50% position of animation, it stands the color. First, it convert chocolate color to blue color, then it convert blue color to red color. We can use as much value as we want here. This is it for this tutorial. In our upcoming tutorial, we're going to learn what is animation fiel mode and what is animation plast mode. Don't miss our upcoming video. Thanks for watching this video, state tune for our next tutorial. 19. CSS Animation Fill Mode Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to learn a new property related CSS animation, and our property name is CSS animation fil mode. But now the question is, what is animation fil mode? The animation fil mode property specify a style for the element when the animation is not playing. We can use it before it start. Also we can use it after it end. Otherwise, we can use it both the condition. At the same time, we can use it before the animation and after the animation. Now, let's talk about the values related animation fil mode. This property come with total four value, none, forwards, backwards, and both. None is the default value. Animation will not apply any style to the element before or after it is executing. Our next value is forward. The element will retain the style values that is set by the last key frame. Basically, it's depend on animation direction and animation iteration count. Our next value is backwards. The element will get the style values that is set by the first keyframe, and retain these during the animation delay period. Otherwise, we can use our last value, which is both. The animation will follow the rules for both fowards and backwards, extending the animation properties in both direction. So we are going to use this four field value in this tutorial. Let's start the practical and see how it works. As you can see side by side, I open my visual studio correator and my browser using LifeSer extension, and I already create SML document named index dot STML. And also you can see a deep element in my browser. And I sat 150 pixel width and 100 pixel height in this deep element. Now I'm going to animate this deep element, and also I'm going to put different color to this element. I'm going to increase the width of this element. As you can see, I already create the keyframe for this animation, and our keyframe name is example. Inside the carliss, I'm going to type. At first, I'm going to take 0%. Inside the cvss. At first, I'm going to change the background color background. And I'm going to put yellow color. Also I'm going to increase the item width. I'm going to type with width. As you can see, our previous wi is 150 pixel, and now I'm going to put 200 pixel. Also I'm going to duplicate this line three time. 0%, then come 50% at last 100%. In 50% of animation, I'm going to increase the width to 50 pixel. Also, I'm going to change the background color. Background color red, and in 100%, I'm going to say item width 300 pixel. Also, I'm going to change the color. This time, I'm going to use blue color. Basically, we create a simple animation key frame. Let's use this keyframe in this box. For this, first, I'm going to take animation property animation. Our animation name is example. Then we need to pass animation duration time, and I want to complete this animation in 2 seconds. Next, I'm going to pass animation delay value, and I want to delay this animation for 3 seconds. If I set this file, as you can see, after three second it run our animation. And after complete the animation, it's back to its initial position. Now I'm going to use animation fiel mode property. We can use it after duration value. Otherwise, we can call the property name. I'm going to call the property name, Animation fiel mode. As you know, this property came with four values. At first, I'm going to use Bad value. Backwards. If we use backward, it's directly jump into the 0% of this animation. Let me increase the animation delay time. I'm going to use 5 seconds for this example. If I set this file, as you can see, it already jump into the 0%. It start from the 0%. Then come 50%, then come 100%, and after complete the animation, it's back to the normal position. Let me show you once again. If I set this file, it start the animation from the 0% and then delay for 5 seconds, and then executing our animation. As you know, if we use backward value, the element will get the style values that is set by the first fame, and retain this during the animation delay period. Let's jump into our next value, which is forwards. Im going to type forward hair. If we use this value, it simply run our animation. But at the end, it's not back to the initial state. Let me show you. If I set this file, as you can see, after 5 seconds, it's going to run our animation. Also, you can see it do not back to the initial state. As you know, the element will retain the style values that is set by the last cre frame. As you can see, our last cframe is 100%, and its background color is blue. A in that position, we set item width, 300 pixel. Let's jump into your next value, which is both. If I use this value, Both, it's going to start our animation from 0%, and after complete the animation, it's stuck on the 100% position. So if I set this file, as you can see, it starts from the 0%, then after five second delay, it start our animation. As you can see after complete the animation, it is not back to the initial state of this element. If we use this value, it will follow the rule for both forwards and backwards. This is the use case of both property. Now, let's talk about our last value, which is none. Some how to type none here. If I set this file, as you can see, nothing going to happen here. After 5 seconds, simply it's run our animation. This is the use case of N value. This is it for this tutorial. I hope you like this tutorial. Now it's clear for you, what is animation fiel mode. Thanks for watching this video, stay tuned for our next Tutorial. 20. CSS Animation Play State Mode Tutorial: Hello, guys, good to see you back. In this tutorial, we are going to learn a new property related CSS animation, and our property name is animation play state Moore. Now the question is, what is animation place state. The animation place state property, specify whether the animation is running or pause. You can run your animation. Otherwise, you can pause your animation with this property. Basically, this property come with two value, pause and running. If you use the pause value, it specify that the animation is pause, and running is the default value of this animation. Without wasting your time, let's start the practical and try to understand what is animation place state. As you can see, side by side, I open my so sto creator and my browser using pSaver extension, and I open my previous est document. Now, I want to stop my animation when I ber my cursor on this deep element. For that, we need to use animation plate property. As you can see, we delay our animation for 5 seconds. If I save this file, you can see after 5 seconds it run our animation. And now I want to stop this animation while it's running. To stop the animation, I'm going to hover my cursor. At first, I'm going to create a hover selector for this box. I'm going to type dot box hover inside the curses, I'm going to use our property. Animation plat. At first, I'm going to use Pause. I'm going to type pause here. If I save this file, as you can see, after five second, it's going to run our animation. But I'm going to hover my cursor on this element, as you can see, it stop our animation. I do not execute the animation completely. I I remove my curs as you can see it complete the animation. Let me show you the example once again. But before I'm going to reduce the delay time, 1 second. If I set this file, as you can see, after once again, it run our animation. But when I hober my cursor on this element, it stop the animation. But now I'm going to remove the curser from this element. As you can see, now it's complete the animation. Then back to the normal state of this element. But now I want to run this animation, when I hover my cursor on this element. For this, I'm going to copy this property. And paste it here. By default, I want to pause this animation. But when I Hoberm carer on this element, I want to run this animation. So in our Hober selector, I'm going to type animation play state running. If I set this file, as you can see after once again, the animation is not running. But if I hober my carer on this element, as you can see, after once again, it run our animation. This is the use case of animation plate property. I hope now it's clear for you how it's work. Thanks for watching this video, S tune for our next torial. 21. Introduction and implementation GSAP animation: Hello guys, good to see you back. Once again, I'm back with a new Tutorial Real tate animation. And from this tutorial, we're going to start GreenSok animation. Now, let's try to understand what is GSOC animation. This is the official website of Greensak Animation. GSP is an industry standard JavaScript animation library from GreenSok. That lets you craft high performance animation that work in every major browser. So I one word, GSOC is a JavaScript animation library. It is very much helpful in web development. Now, let's open the homepage. So this is the homepage of GSAP animation. We used to use CSS for animation, but now we can create animation using Java Scrib libraries. And now animation become very easy because we don't need to use huge amount of CSS property in our project. Not only animation, using GSAP, we can create a website also. Let me show you the demonstration. These are the example of website that we can create using GSOC animation. All the website you can see in this section create with GSOC animation. If I scroll down Little wet, here you can see the website made with GSP animations. Suppose I'm going to open this website, this portfolio website. Let's see how it's look. Here you can see the animation and the transitions in this website. GSAP animation provide you the hybrid look to your website. Let me show you other examples. There are many website made with GSOC animation. Suppose if I open this one, here you can see the result. When I scroll down my page, it's look like that. There are a lot of examples made with GSAP animations. You can check out all the examples one by one, and you can learn GSAP if you have the basic knowledge of Java script, Atmel ancess. You don't need any advanced level of coding to learn GSAP. Now let's see how we can install GSOC animation. For that, we need to go and jump into the doc section documentation. And I already opened my Visa Studio code editor and my browser using Live Server extension. So as you can see in my current working directory, we have only index dot estil file. Now I'm going to create a JavaScript file. Sound type app dot, and I'm going to hit Enter. And now I'm going to link this JavaScript file in my estim document. So here I'm going to use Script tag. Script source source equal to app dot s. I'm going to set this file. And you can take any name for your Tower Script file. It's not mandatory to use Ap Dogs. You can use crypto js, ym Dogs, Hart Dogs. It's all about you. Now let's back to the document page. After open the documentation section, you need to click on Install Dropdown Option. Otherwise, you can search for Install. So I'm going to click on this section Install. And here it provide all type of installation method. Using NPM, Note package Manager, also, you can use CN. Content delivery network. Also it provide R. The best and easiest way to use this animation is CDN. And this is your SN link provided by GSAP. So I'm to copy this link and back to my is Studio cod editor. And I'm going to paste it before the App Do JS script tag. And I'm going to set this file. Always use your custom JS file below the source file because first your browser should have knowledge about GSA. Then it can easily call the functions in your custom JS file. And now we are going to experimenting with little animation. Also, we can create this animation using CSS, but we are not going to use CSS here. So let's implement the GSOp animation. So in our body tag, first, I'm going to create a deep tag Dep dot box. Here I create a deep tag we, class name box. And then I'm going to style this box a little bit. Let me show you. So I'm going to use style tag. Style and inside the style tag, I'm going to select the box. Dot box, then inside the Caris first property, I'm going to use wheel. And here, I'm going to st 200 pixel. Also, I'm going to st height, height, 200 pixel. Basically, I'm going to create a square box, and then I'm going to say background. Background, and it could be any color. For now, I'm going to use red color because red color is much more visible. And I'm going to set this file. After set this file, here you can see the result. We done our STML and Cass part. Let's jump into the Abdo JS file, greensock animation. Did you remember in our previous tutorials, we'll learn about to and from? Suppose I want to move this box at xs direction. I want to move it 100 pixel at xs direction. For now, this box s position is zero, and I want to move it 100 pixel. If you want to move zero to 100, then you need to use two. And if you want to move 102, zero again, then you need to use from you need to remember the basic concept about it? We already learned about it in our animation section, so I'm not going to explain it in depth. Let's start the code to clear the concept. Here, I'm going to type GSA. GSA, dot, we are going to use two function. Two. Then inside the round brass, you need to mention the selector, which element you want to select. I'm going to select this box using its class name. So inside the double codes, I'm going to type dot box. Then com. Next line, I'm going to use calibraceis, and here we need to mention, what do we want to do with this box? I want to move this box at x excess direction. So I'm going to pass X, colon, and I'm going to move it up to 300 pixel. And before I set this file, if I show you my index dot estimate file, and if I show you my style section, and as you can see in my style section, we do not use any animation. After set this file, as you can see, it's not working because my auto suggestion because my auto suggestion replace this keyword with this one. Again we need to replace it with GSA. Yes, and I'm going to set this file. A to set this file, as you can see, it's moved the element from this position to this position at excess direction. Now, let me explain you what is going on behind the scene. So let's inspect this section and first, I'm going to uni this option and then and then I'm going to select this element and here I'm going to open my style section. As you can see in this style sion, As you can see in this style section, here it transform property. Transform translate 300 pixel. Behind the scene, GSP use this sss property to move this element. Let me clear the concept. I'm going to extend the value. I'm going to make it 500. This time, I'm going to move it 500 pixel. If I set this file, here you can see, now transform translate value is x x position 500 pixel, and y xs position still zero because we do not move this element at y x direction. That's why it's zero. The core structure made with css. For this tutorial, I think live server is not mandatory, so I'm going to turn off the Lib server. And for now, I'm going to open Index dot estim file from our directory. As you can see, this time I open this file from my directory. I'm not going to use any live server. If I reload this browser, you can see the animation. You can experience this animation. If I use the live server, then it's not working so well. For now, if I read this browser, as you can see it moving so fast, so I'm going to say some duration. Here, I'm going to use coma, then I'm going to use property call duration. Duration, colon, for now, I'm going to set five second. I'm going to set this file. After set this file, if I reload this browser, now you can see our animation take five second to complete it. If I reload it again, here you can notice time to time it increase our excess value. Basically, it changed the ss property according to duration. If you want to run this animation after 2 seconds, yes, you can use delay. Just here you into coma, then you need to type delay. Delay, colon, and I one, two second delay. If I set this file and reart my browser, as you can see after two second, it start a animation. To make this animation happen, we don't need to type huge amount of Sess cote in our Sass section. Just need to use this amount of cote if we use GSAP library. Next, I'm going to move this box at y x direction. Here, I'm going to type y, colon, and from xs direction, I want to move it, 300 pixel. If I set this file and reload my browser, as you can see after waiting two second, it move x x also it move x direction. At the same time, if you want to change the background color, you can use this property. Suppose suppose I want to change the background, so I'm going to take background property. Background color. Colon, and I want to say it green color. Background color green. And then I'm going to save this file. After set this file, I'm going to reload the browser. After set this file, as you can see, it's not working because I think I did some es. We need to provide this value is a string, so I need to provide this value inside the quotation. So I'm going to use single. Again, I'm going to set this file and redote my browser. After rete my browser, operating by two second, as you can see, it start the animation, and also it changed the background color of this deep element. For now, I'm going to reduce the duration, I'm going to make it two second. Also, I'm going to remove delay, and set this file again. As you can see, now it turned red to green. Remember, in Css, we use background property like this. Background, hyphen color. But in Java script, we do not use background properties like this. Here we use Camel case water. As you can see, our C characters start with Camel case. We use Camel case in Java script. Here you can use within hy property also scale property. Suppose I want to scale this element. H type scale. Scale, and I want to scale it up to two time then coma. Now if I run this animation, it's going to extend this element two time. Let me show you. After run this animation, as you can see, it extend the size of the box. Now it's become 400 pixel at x xs and 400 pixel at y x. Not only that you can set w and height, let me show you. Then again, I'm going to set this file and read my browser, and this time, I'm going to set w. We and how I'm going to set with 100 pixel. Basically, if I set this file and run this animation, it's going to re, it's going to reduce the element width because by de four our element width is 200 pixel. So if I relate this animation as you can see, it reduce the width of this. For now, I hope this concept is clear for you, how we can use it. In this example to run this animation, we need to reload this browser. But in future, to run this animation, we are going to use Scroll trigger. So whenever I scroll the browser, it's going to run the animation. As I told you to understand SAP animation, you should have basic knowledge about SSs and Stable. So this is it for this tutorial. This is the little introduction and demonstration about SAP animation. I hope you enjoy this tutorial. Thanks for watching this video, Stun for the next Tutorial. 22. Introduction and implementation GSAP animation part Two: Hey, guys is good to see you back. This is another tutorial related green sock animation. In our previous tutorial, we create this basic animation using GSOC. If we reload this page, as you can see, this is our animation. It took 2 seconds to complete the animation. Also, it reduced the width of this element. With that, also change, the background color of this element, red to green. And now I'm going to show you how you can rotate this element. For now, I'm going to comment out this line width, then I'm going to use another property called rotate. Rotate, and I want to rotate 360 d green. C. If I set this file and lode my browser, you can see the result. Basically, we can do all the stuff using our animation properties in CSS. In future, we are going to apply this animation with events. That's why Java script is important, and now we are going jump into the from function. Now I'm going to comment out all the lines. Then I'm going to call from function. So again Amer type G G SAP dot, again, my autosugest, replace my keyword. So Amer type GSP menual. S dot from the inside the round ss. At first, I'm going to select the box element. Dot box. Can the next line, I'm going to use cases. Inside the cases, we need to define our properties and values, and I'm going to apply exact same properties. Here I type x x value is 500. Y value is 300. Next, I'm going to pass rooted value. Rotate value, Ama apply 360 degree. Next value I say duration. Duration and monta un two second. Next, I'm to apply background color. Background color. Background color, ama apply is at the single green. And I want to set this file. So basically, I apply the same properties which I apply in my two function. If I relote my browser, now you can understand what is the difference between two and from function. When I use two function, it moved the element from the origin. But when you apply from function, denates back to the its origin place. So I I relode my browser, as you can see, it returned to the origin place. If I relode my browser again, as you can see, it's back to the original position. So that's the basic difference between two and from function. If you notice you gas, it turned into green to red color. Also it rotate in opposite direction. Now let's talk about repeat property. If you want to repeat this animation multiple time, then you need to use this property. He type, repeat. Repeat, and I'm going to say repeat three time. If I relode my browser, it's going to repeat this animation total four time. Because by default, it's going to run over animation one time, then you're going to repeat the animation three time. Let me show you. So I'm going to reload my browser. After reloading my browser as you can see, it's going to repeat this animation total four time. Now, if you want to repeat it infinite time, for that, you can use minus one value. If I set this file and reload my browser, as you can see, it's going to run over animation infe. T. It's not going to stop until I change the value. For now, I'm going to change the value, repeat, zero, and I'm going to save this file. After I set this file, I'm going to reload my browser. So as you can see, this time, it's going to stop our animation repeat. And now I'm going to apply O effect. Now I want to run my animation up and down. For that, I'm going to pass a property O U, U, and pass true value. True. Then I'm going to repeat this animation. For time. I want to set this file. If I reload the browser, you can see the UU effect. Now it's work like UU. If I make this value true, then it move forward and backward. It will go once and come back. And I I pass repeat value infinite, then infinite time, it's going to do the same thing. Not only that, also you can apply the same property in this two function. Then it's going to provide you the same effect, but the different is, if we use two function, then this element not going back to the original position. It stop in the destination position at that place. Now let's back to the index dot page. As you can see, now we have only one deep element. But I'm going to dugate this line total three time. Now we have total four deep element. Also, I'm going to comment out some properties in my ap Dots function. First, I'm going to remove rotate function. Then I want to move it only excess direction. Next, I'm going to remove the repeat value. Also, I'm going to uncomment U. Then I want to set this file. Then back to the estel page and reduce the size of this box. This time, I'm going to make it 100 pixel we by 100 pixel. If I set this file and reload my browser, it's going to apply all the animation animation, all the deep element because their class is same. Let's provide a little margin between them. Margin, five pixel. And I'm going to set this file. After slip this file, if I read my browser, now you can see the gap between them. And now I'm going to change the class name all of these elements. This is box one. This is box number two. This is box number three, and this is Box number four. And I'm going to set this file. Now let's back to the Apo JS file. This is Box Number one. First, I'm going to change the animation style. I'm going to use two function. This app, two. Then I'm going to duplicate this section multiple time. Basically, I'm going to remove all of these commented lines. I don't need it. Then I'm going to duplicate this section total three time. This is box number two. This is box number three. Sorry, this one is box number. This one is box number three, and last one is box number four. If I set this file and reorde my browser, it's going to return the same result. Only to make changes in our index dot a SML file style section. Here I'm going to target all the de element at once. Because I change the because from here, I change the class names. I'm going to pass the element name tag name D. And set this file. If I read my browser, you go see the result. Now, all the elements complete the animation at the same time. But now I want to run second number after the first number. I want to say after run the first element animation, I want some delay for the second element. For that, here I'm going to use another property called delay. I walks to, I'm going to use delay property. Delay, and I want to delay up to two second. Oops delay spelling is round, DE AY. So I to set this file again and reload my browser. After reload my browser, as you can see, after two second delay, it runo animation. So one by one, you can delay the animation. Suppose for third element, I'm going to delay it up to 4 seconds. Then for the fourth element, I want to delay it up to 6 seconds. Again, I'm going to set this file and reload my browser. After red my browser, after complete it, it's waiting for 2 seconds, then it's going to run one by one. Now the problem is, you need to select all the box one by one. Also, you need to apply delay multiple time. But Green Sock have the solution for this. So I'm going to comment out all the line except the first one. Then I duplicate the first one and comment out this duplicate one. And this time, I'm going to select all the boxes at once. I'm going to remove box one. Also, I need to make changes in our estable file. Now again, I'm going to change all the class name. Otherwise, also we can add another class name box. Here I'm going to add box. Box. And I want to set this file. Basically, here we use multiple class at the same element. Now leads back to the Abdo JS file. Now I'm going to apply the same delay in my animation. For that, only to use a property called strager, STA double GER, staggered, and I'm going to say six. Then I'm to set this file. After set this file, I'm going to reload my browser. As you can see, after complete the first one, then need to run the second one. Then after complete the second one, then it's going to run the third one. At the same way, after complete the third one, then it's going to run the fourth one. If I reduce the values tagger value, if I make it four and then set this file, now it's going to do the same thing a little faster. After complete the first one, it's going to run the second one. Then it's going to run the third one. At last, it's going to run the fourth one. If I reduce the tiger value, if I make it 1 second, one and then set this file and elute my browser, now you can see after 1 second, it's going to run all the animation one by one. Now, we don't need to type this amount of code to get the result. Just one property and value do the same thing. We don't need to create individual animation for that. The help of stagger value, you can define the delay time between the animations. Stagger value going to manage your individual delays. If you open the documentation of this GSP animation and search for two function two GSAP to function, and if you open this section, here you can see the usage of the special properties. You can see data, delay, duration is, ID, Las. There are a lot of properties related to function, and you can use all of it. After scroll down this page, little bit, here you can see the stagger property. And from this section, you can read the documentation about stagger property. Official documentation is the best way to learn something. It's always give you the right and upd dated answer. You can read about UU property, UEs, key frames, et cetera. In our first tutorial and the second tutorial, I just try to introduce how we can use GSP animation, and what are the properties? We just learn about the working process of GSP animation. From the next tutorial, we are going to learn about timelines. We are going to learn about scroll dealer, locomotive, et cetera. So this is it for the Tutorial. Thanks for watching this video, Stedun, for the next Tutorial. 23. Timeline in GSAP Create Your First Timeline: Hello guys good to see you back. Once again, I'm back with a new Tutorial related GSP animation. And in this tutorial, we're going to learn GSP timeline. The GSP timeline is a sequencing tool that allow users to control and manage the timing of animation. Basically, it is a container for twins and other timelines, and it is used to build complex sequence. With timelines, animations are displayed in the water. They are listed in the cool. So new animations can be added without manually calculating delays. Timelines also make it possible to create easily adjustable and resilient animation sequence. Here are some things you can do disp timelines. Positioning animation in time, repeat animations, include delays before repetition and chain animation. In a simple word, timeline is anything getting set in a time frame. Suppose this is our five second timeline. But how we can specify different tasks at different time seconds. We can perform different tasks at different time frame. Basically, using timeline, we can specify what we are going to execute step by step. In our previous tutorial, we'll learn about how we can run GSAP animation. If we want to run animations one after another, then we need to provide delay each of the animation, and to resolve the delay problem, GSP introduce timeline. So we're going to discuss the timeline. And remember, our timeline is connected with each other and it runs step by step. So finally, we are in documentation page of GSAp animation. And in our previous tutorials, we already learned how we can install GSP animation. Now, let's back to the User studio code. So as you can see, side by side, I open my visors to your code editor and my browser. And as you can see in my current working directory, we have Coral three file, Index dot SML Mind Sess file, and Abdo GS file. And in our Index dot STL file, I already link GSP animation in this script tag, and I already use SN link of GSP animation using script tag. Now inside the body tag, I'm going to create Total three box. So Hamer type D has tag box. This is box number one. Then I duplicate this section. This is box number two. Again, I'm going to duplicate this section, and this is box number three. Also, I'm going to assign a class. I'm going to assign the same class that we can target all the boxes advce. So I'm going to type class, this is just box. Then I copy this section and paste it in our box two and box straight. Again, I'm going to set this file. And then I'm going to jump into the main dot css five. First, I'm going to use universal selector. Start inside the Cis, I'm going to say margin, zero. Our next property, I'm going to use padding zero, and our third property is box sizing box sizing border box. And then I'm going to style the box element. So I'm going to use its class name dot box inside the cultivs, first property, I'm going to use weight. Weight, 100 pixel. Height, 100 pixel. Then I'm going to use background property, background, and I'm going to use gold color. Also, I'm going to add margin, margin, and I'm going to add five pixel marching. I'm going to set this file. If I sit this file and relate my browser, here you see the result. And now I want to assign different eimation to these items. But one after another. And to assign the animation, we're going to use GSAp. Let's jump into the app dot GS file. First I'm to type, Gap. Dot. Again, our auto Suggesion replaces the keyword. I'm back to the position GSP, dot, and I'm going to use pro function. From. Then in set the round ss inset the double codes, at first, I'm going to select the first element, box one. I'm going to select this element using his ID name, has tag box one. Then Oma inset the cis, first property, I'm going to use opacity. Opacity. First, I'm going to make the opacity zero and next, I'm going to use duration, animation duration time. Duration and I want to say duration total five second. If I set this file and relode my browser within 5 seconds, this element become 021. I want to say this element opposite become 021. Let me show you. If I relode my browser, as you can see within 5 seconds, it become 021. Also, I'm going to say excess value 300. From excess direction, it come from 300 pixel. I'm going to set this file and relode my browser, you can see the result. I think five second is too long for this animation, so I'm going to make it two second. Then I'm going to begin this section. This time, I'm going to select the box number two. I'm going to change the ID name box number two, I I set this file and reload my browser, then both the animation going to work together. Let me show you. You can see the result. Now we have one solution. We can use delay property. Delay, and I want to add two second delay. If I set this file and relod my browser, so as you can see, to use COA between these two D. Then again, I'm going to set this file and led by browser. Here you can see after complete the first animation and two second delay, complete the second animation. If I did the same thing multiple times, then it's become huge code. Suppose we create a website and where we are going to learn multiple effects, and I want to run this multiple effect one after another. And if we follow this method, then it's become horrible. We are going to use timeline for that. I'm going to comment out all the codes. Then, then I back to the documentation section. Then you can search for timeline in this filter sidebar. Also, you can click this option, timeline. Here I just try to show you from where you can get the timeline documentation. Then just back to the JS file. First, I'm going to declare a variable. Here type CS. Cs and my variable limit is T. TL stats for timeline, equal to GSA. GS timeline. GSA dot timeline function. Here do we create the timeline, and now I'm going to use the same code. I'm going to copy this code and I'm going to run it using GSAp. Let me show you. Here, I'm going to paste the code and I'm going to uncommen this code. Now we need this DLA property. So I'm going to remove this property. Here, I'm going to replace GSP with TL. T L. And I'm going to set this file. Now, here we create a timeline. If I reload my browser, as you can see after complete the first one, it start the second one. But you can notice here we do not use any delay. If I do the same thing for the third one, so I'm going to duplicate this line and change the ID name box number three, and they set this file. And then set this file and reload by browser. Now you can see after complete the first one, it's going to start the second one, then it's going to start the third one. Basically, timeline replace the delay property. Obviously, you can use delay if you work with little amount of animation. If your animation is big, otherwise, if you use multiple animation, then always go with timeline. It is very helpful when you create a series of effects. Now, led us back to the documentation. If you want to repeat your timeline, you can use this object. Let me show you. So I'm going to copy this object value and property. Then back to the visa sudo code. Then inside this tine function, I'm going to use Cal ases. Then I'm going to paste the repeat value. I want to repeat this animation total two time. If I set this file and reload my browser, as you can see, first it complete the first one, then second one, then third one. And now it's going to repeat the timeline. This is how repeat work. And if you want to delay between these timelines, yes, you can. Just unit to use this property, repeat delay. So copy, this property and value, then back to the with the studio code, and after coma, I'm going to paste it here. It's going to repeat this animation product two time. Also, it's going to add a little delay up once again between this timeline. If I set this file and reload my browser after complete the timeline, you can see, it's going to wait for 1 second. Then after once again, it's going to run the timeline once again. You can see the result. And if I increase the value, then it's going to wait for long time. Also, it provides some other functions like pause, resume SC and reverse. Suppose if you want to reverse the timeline, if you click on any button, then it's going to reverse the timeline. It provides all the different options, how you can use it. You can read the documentation for the more knowledge about it. From here, you can learn all the options. Now let's talk about absolute time. It measured from the start of the timeline. Let me show you the example. Now, let's d to the visa studio code, and let's d to the index dot a stable fine. Here, I'm going to use heading tag, H two, and also I'm going to assign an I ID equal to demi and he type a text, hello world. And I'm going to set this file and reload my browser. Then let's back to the Ab dot JS file. Here, I'm going to animate this heading tag. But at first, I'm going to reduce the repeat value. I want to repeat it just for one time. Then I'm going to select this heading tag using timeline. TL dot, and I'm going to use from method. Then I set the round brass. First, I'm going to target first, I'm going to target the heading tag using the IDame. Has tag Dm. Ca, at the calibrass, Ham use property called opacity. Opacity, and I'm set opacity zero, and then I'm going to use the obsolete time exactly like that. Hm to use the obsolete time, and I want to set it for 3 seconds. If I set this file and red my browser, as you can see, after 3 seconds, it's going to start the animation. First, it's going to show the hellowd, then it's going to start this animation one by one. Basically, it adds a little delay to this animation. Basically, it's going to show this element after 3 seconds. But if I move this one, if I move this below the box two, so I'm going to cut this portion and paste it below the box two section. If I set this file and relode my browser, up 3 seconds, it's going to show this text. But it already start this timeline. Let me show you. If I relode my browser, as you can see it start my animation, then up 3 seconds, it show the text. That's how it works if I change the water of it. There are a lot of things like this in GSP timeline. Level start, and we are going to learn about it all time to time in our coming tutorial. Next, we are going to create an website. In our first Tutorial, we'll learn how we can use GSP and in our second Tutorial, we'll learn about timeline. In the next tutorial, I'm going to try to create a interesting landing page using this timeline methods. And also, I'm going to try to implement all the things which I learned in our previous tutorials. So this is it for this Tutorial. Thanks for watching this video, Stune for the next Tutorial. 24. Create Animated Timeline Designs: Hey, guys, good to see you back. Once again, I'm back with a new tutorial related DSP animation. Today in this tutorial, we are going to create a beautiful project. We are going to create a horizontal animation timeline project. As you can see in my browser, we have a horizontal line. And how you can see, we create a timeline using these boxes. Now, I want to animate this box, when I delod my browser. So you can notice when I delod my browser, first, you can see it moved the horizontal line. Then one by one, it's going to animate our boxes. Boxes with bows effect, rotation effect, scale effect, ease effect, and at last, we move this box from the opposite direction. How we can create this animation effect. As you know, to create this animation effect, we're going to use GSAP timeline. Also, we are going to use GAP is I properties. So without wasting your time, let's start the practical and see how we can create this beautiful animation. So as you can see, we are in mind visto codor. And if you notice, you can see, in our body tag, we have a main deep tag. Inside this main deep tag, he will create multiple boxes. He will we create total six box, and every box come with different ID. With that, H we assign a class name box to every deep element. And to define the position of the box, also we assign to other classes, box top for top position, and for box bottom for bottom position. We use this class to position our element above the horizontal line. Also, we have another class name box bottom. And this classes used to place boxes below the horizontal line. Now, let's jump into the CSS file. If I show you this CSS file, at first, we assign fixed win height to our mean deep tag, and also we set a background color. Then here we create a horizontal line using posto selector after posto. First, we create a bland content, then we position it absolute, because in our main element, Hos use position relative, Dy D H use absolute position. Then I use fixed gh w height, six pixel a eighth, 1920 pixel. There after create the horizontal line. Here I create the boxes, these boxes. Next, I create the circles. Here we create two different circles for boxtop classes and box bottom classes. To create the circles, also use after posto selector. As you can see, this circle and the rosie made with postdocla selectors. At last, one by one, I position this box according to horizontal line. In this tutorial, I'm not going to explain you how I can create this STS structure. Don't worry, I will provide the source code of this structure. Now, let's jump into the JS file, Abdo JS file. But before, if I show you my Index dot STL file, here you can see, I already link with SP library using CL. Also also attach Abdo JS file with this document. Let's that to the Abdo JS file. So at fast, I'm going to integrate timeline. So I'm going to create a variable cost. And our variable m is t, TL stars for timeline, equal to g Sap. Gap timeline function. They'll seg two in this line. After create the timeline, one by one, I want to implement all the element. At first, I want to implement the main element. I'm going to select the class name, and then back to the Apo five. At first, I'm going to use form function. Tl from Then inside the round ss. At first, I'm going to select the main element, using its class name dot Ming, and I want to move this element at x x direction. Inside the cals heterotype, x colon inside the double minus hundred. If I set this file and back to my browser and reload my browser, you can see the result. As you can see, we'll move this main element from the let to right side, I think this animation is too quick. Let's use some duration. Here, I'm going to use duration property. Duration, and here I'm going to use total force second duration. I think this is enough. If I set this file and back to my browser and reload my browser, you can see the effect. As you can see, whole section move right side within 4 seconds. But if I reload this browser again, as you can see the background color of body is still white. Now we need to match the background color of this body with this color. For that, I'm going to jump into the style dot CSS file. And here, I'm going to use the same background color in my body tag. So at first, I'm going to select the body tag. Body is at the crass, I'm going to use this background property, and I'm going to set this file. Now, if I back to my browser and reload it. Now our body background color and main element background color is similar. And to make this animation more attractive, let's make it 100%. -100%, not pixel. If I set this file and back to my browser and reload my browser. You can see the animation. How it's so. This is just animation of the main section. But as I told you in our earlier tutorials, using Live Server is the not based option for SSs animation because every time I save my file, it reload the browser. So I'm going to pause this recording for 2 seconds. And this time, I open this document from my directory, not from the live server. At first, in our timeline, we move this main element from the -100% excess direction. Here we use timeline because one by one, I want to perform my animation. Next, I'm going to select our box one element. This one. So I copy the ID Name and back to the Abdo JS file. Here I'm going to tie, basically, I'm going to dig this section and replace dot main our first box, using its ID name. Hs that box one. Also, I want to move this element from x xs direction. Here I want to say duration, just 1 second. And I'm going to set this file. Now, let's back to the browser. If I read this browser, at first, it's going to perform the main animation, then it's going to perform the second animation. But the problem is up to the animation for the first element, the circles go behind to the horizontal line. So to resolve the problem, lets that to the style dot cess file. This is our style dot cess file. This is the horizontal line. At first, in our horizontal line, I'm going to say zero index, Zight index, and I'm going to say zero index one. Then I'm going to say zero index in our box. I'm going to type Zight index and Herm pas 999. And I'm going to set this file. Here I use Big V because every time I need by boxes above the horizontal line. That's why, here I sit horizontal line zer index one and box zero index 999. If I set this file and act browser and reload this browser, this time, you can see up to run the main animation, it move the box. And as you notice, this time our circle is above the horizontal line. With that, I want to make this box animation more attractive. Hm to set opacity. Let's back to the Abdo chase file and this time I'm going to use another property call opacity, OPA City opacity zero. When the box start moving from the x xs direction, then we set the opposite zero. If I back to the browser and elute my browser, now you can see up on the main animation. If you notice carefully it's work properly. But if I increase the duration, if I make it 3 seconds for the box animation, and then again, back to the browser and reload the browser, first it run the main animation. Now you can notice the opacity. Here you can notice the opacity of this element, how it's changed. And now I want to take this animation to the next level. For that, we need to use some easing effect. So let's jump into the documentation of this website and search for easing, EA, AIN Z, you can search it in this filter side vers section. Provide multiple easing animation example, such as power one, power two, power three, power four, back, bounds, illustri, et cetera. Every option is different from each other. Suppose if I select power two, this is how our animation going to run. If I use back. This is how our animation going to perform. This is the grap of this animation. At the same way, if you want to use illustr effect, this is how illustry effect work. Suppose I want to use this effect illustrate. Copy this property and value and then back to the studio code. Here, a pres the duration, 2.2 0.5 second, then I'm going to use coma. Next, I'm going to use this property and value illustrate. And I'm going to set this file. After set this file, if I back to my browser and reload this browser, after perform the main animation, you can see the try effect for the first element. For now, I would like to stop the main deep animation, because every time it's going to run the animation and it take more time. First, I'm going to comment out this section. Don't worry. I will uncomment this section later. Then I'm going to set this file and reload my browser. Now you can notice only this animation. If you want to change the effect, suppose you want to use ba. In that case, just here, you need to type is back. After this file, if I reload my browser, You can say the back effect. Now, at the same way, I want to bring this element from the opposite direction. I want to bring this element from the right side. This time, I want to bring our last element from the right side. I'm going to big this section, and this time I'm going to select box number six, because this is the last box. We select this box using its ID name, and then I'm going to change the x axis position, hundred percent from the x xs. If I set this file and back to a browser, and reload my browser. As you notice, first box come from this place and second box come from this direction. Both the animation doing the same thing, but just to change the direction. Next, I'm going to use box effect for this element, 2012. If I select this option, as you can see how this animation work. Let's back to the Es studio code. Between box one and box six, I want to place box two animation. I want to make it serially for a duplicate this section and select box two, and I'm going to change the ese value back to bound. And also, we need to change the position, xs to y x, minus y x position, and I'm going to set this file. After set this file, let's the browser. After the browser, after run the first box animation, it's going to run the second box animation. Oops, I think I did some mistake because we need to bring this box from the bottom, not from the upside. Let's back to the visas to your code and remove the -100% and set this file. After this file, again, I'm going to reload my browser. After run the first animation, you can notice the second animation, how it's work, and it provide bounce effect. Then it run the third animation. Then I'm going to animate the third box. So let's back to the visas to your code, and I'm going to pigate this section. And this time I want to select box number three, and I'm going to change the direction -100%. With that. Now, with bounce, I want some rotating effect. So I'm going to use a property called rotate. Rotate, colon, and I want to rotate it 360 degree, a complete circle. I'm going to set this file. After set this file, if I back to my browser and reload my browser, first it run our first element, then it going to run the second element, and if you notice, as you can see, it bows the element also it rooted the element. Next, I'm going to target the fourth box. Again, I'm back to the sto code and dulicate, number three. First, I'm going to change the direction, 100% because I want to move it from the bottom. Then I'm going to use the same bounds effect. But this time I'm not going to use rotate effect. This time, I'm going to use skill ive. Scale, colon, and I want to make scale 0-1. So here I pass zero. But before I set this file, we need to change the ID, box number four, and I'm going to set this file. Now, let's salute the browser. After relute the browser, if you notice the fourth box, you can understand the animation. With bounce effect, it scale the element. And now I want to animate the fifth element. For that, this time I'm going to use another effect. This time, I'm going to use slow effect. Let's back to the studio code, and first, I'm going to duplicate this section. Then I'm going to change the ID. Box four to five, and change bounce to slow. At first, I'm going to change the direction -100%, and I'm going to remove the scale one. This time, I'm not going to apply scale effect, and I'm going to set this file. After set this file, lays back to the browser and reload the browser. After relate the browser, as you can see one by one, it's going to perform all the animations. Bows the animation, rotating animation, scale animation, slow effect animation. And back animation from the opposite direction. And now I'm going to activate my main deep animation. Let's back to the video studio code and uncomment this section. And set this file again. Now let's back to the browser and reroute my browser. Now you can see first, you can see a horizontal line come from this direction, then one by one, it perform all the animation. Finally, we create this timeline effect animation using GSAM. This is it for the Tutorial, as for watching this video, Sedule for the next Tutorial. 25. CSS Animated Link Button : Welcome back guys. This is our first exercise. We're going to start our animation exercise with simple one. In this tutorial, we're going to learn how we can create CSS animated link button. Let's see the output of this animation. Let me show you the output of our project. As you can see, there is a button. When I hopper my cursor on it, you can see a sliding effect. Also, you can see it's still the text color. It's a very simple project, but effective one for beginners. Let me show you how we can create it. As you can see, side by side, I open my iso sudo Correor, and my browser using Live Server extension. At first, I'm going to create an anchor tag in this document. So I'm going to type A, and I'm going to type some text. Click me. I set this file, you can see the text in our browser, click me. Also, I'm going to assign a class to this anchor tag. Class, and our class name is BTM means button. Then inside the head tag, I'm going to create style tag. Then inside the style tag, I'm going to create a selector using BTN class dot BTN. Then inside the Calass. At first, for our button class, I'm going to say a background color. So to type background here. Background. I'm going to take orange color for our background. If I set this file, you can see the result, and now I want to change the text color. Some type, color, color, white. If I set this file, you can see the result. If you notice, you can see a underline in this text, and now we need to remove the underline. For that, we need to use text decoration property. I'm going to type text decoration. None. If I set this file, as you can see, it's remove underline from the text. Now let's add some padding to this button. Some type padding, padding from top en button, I'm going to assign pixel, and from left and right, I'm going to assign ten pixel. If I set this file, you can see the result. If you want to add some paragraph above the button and below the button. In that case, you need to use display inline block. So type display property. Display inline block. If we do not use display inline property, then our padding can overlap with paragraph. For that reason, we need to use display value inline block. Now I want to increase the font size, and I also change the font family. So type font family hair, font family aerial. Also, I'm going to increase the font size. So to type font size here, font size. 22 pixel. If I satisfy, now you clearly see our button. Kick me. Now you can see the color in the background. When I over my cursor, I want to animate this background color. I don't want to show this color without animation. I just want to show this color border of this button. For that, I'm going to comment out this property background. Then I'm going to type border. Border one pixel, solid, and I'm going to use orange red color for border. If I set this file, you can see the result. Also, I'm going to change the font color. I'm going to use the same color for form. Orange rate. If I set this file, now you can see only border and the text, and now I want to give a sliding effect using animation. For that, I'm going to create a pseudo selector dot BTN Ater. Then in set the aliases. At first, I'm going to set a back down color, type background, and I'm going to use the same color for background, orange rate, and then we need to position it. I'm going to type position property. Position absolute. If we use ata value, we need to remove our content. For that, I'm going to type content double codes. We need to leave it blank. If we use Ater and before pseudo selector. As you can see for Ater, we use absolute position. I'm going to use position relative in our parent container, position relative. After position, we need to pass top and left v type, top, zero, Left, zero, and then I'm going to st with and height for our Ater selector. First type with w hundred percent. And then also I'm going to say height, height, 100%. If I set this file, as you can see, our ta element cover our whole button. For now, I'm going to say 0% with, and now we need to create the hover effect of BGN class. For that, I'm going to type dot btn, and I'm going to create a hover selector. Then inside the cvss, at first, I'm going to change the button text color. When I hover my cursor on this button, I want to change button text color. I'm going to type color white. Then I'm going to duplicate this hover selector with BTN glass, and now I'm going to create hover selector with apter Her colon apter. In this selector, I want to extend the weed. I want to type weed hundred percent. If I set this file and hover my cursor on this button, you can see the effect, but you cannot see the sliding effect. Also, you cannot see the text because we need to move the ter container behind the text. For that, we need to use Z index. Some type z index minus one. If I set this file and hover my cursor on this button, you can see the effect. Here you can see when I per my cursor on it, it stands the text color. With that, it increased up to selector width 100% from 0% to 100%. And now we need to use transition for our animation. We need to use this transition in our parent class. Inside the BTN class, I'm going to type transition. Transition all. I want to apply the transition in all transformation. That's why I use all value, and then we need to pass transition duration time. I want to pass 0.5 second, and then you need to pass transition mode, which is E. I'm going to use e value. Also, I want to pass transition de ve. For that, I'm going to use zero second. If I set this file, it's going to effect text only. If I over cur on it, you can see the effect. You can see the transition effect on our text, not the background color. To get this sliding effect, we need to use this transition in our upper selector. I copy this transition and paste it here. If I set this file and hover my curs are on it, you can see the result. We successfully create our animated link button. We do not use any CSS keyframe for that. Hey, this exercise is not a very difficult one because I want to start these animation projects with a very simple transition effects, not the CSS key frames. From our next project, we are going to jump into the difficult one. Thanks for watching this video, stay tuned for our next exercise. 26. CSS 3D Flip on Hover Pure CSS3 3D Button Hover Effects : Good to see you back guys once again, I'm back with a new exciting animation project. In this project, we are going to create three day sleep hover button. Without wasting your time, let's see the demonstration. As you can see, there is a button. If I hover my cursor on it, you can see the result. Here you can see the opposite part of this button. It flip the button and return a new taste. Click hair. It's a hoverific animation button, but it is pretty advanced. Without wasting your time, let's start the practical and see how it's work. As you can see, side by side, I open my visual studio corretor and my browser using Lb Server extension. Also, you can see, I already create estil document named index dot at. With that, I create a Sess file, style dot Sess. As you can see, I link this style file with this estim document. So first, I'm going to create a anchor tag inside the body tag. So type A. By default, I don't want to redirect it, so I want to use has tag. Now inside this anchor tag, I'm going to create three new span tag. Span glass front. Then I'm going to deg this span tag two time. Our first span class name is front, and our second span class name is center. So type, center, and our last span class name is back. So type back. Then in our front side, I'm going to type pi, and In our back side, I'm going to type hair. For our center span tag, I want to leave it blank. If I set this file, as you can see, as you can see in my browser, here it's sprint, click air, top left corner of this browser. I successfully done over a stable part. Let's move to the thesis file and style this page. At first, I'm going to style our body tag. So to type body. Inside the Calise, I'm going to set marzin zero, Marzin zero. Also, I want to st padding zero, padding, zero, and then I'm going to use font family property. So type font family, Sans. Also, I'm going to set a dark background color to our body. Background, and I'm going to use hexa ve, has, two, six, two, six, 26. If I set this file, you can see the result. As you can see in my browser, now our background color is dark gray, and now we need to stayle this anger tag. Inside the anger tag, we have total pan tag. Let's starle the anger tag. So res A inside the calices at first, I'm going to use position property, position. Position, absolutely. Now I want to align this anchor tag, middle of this page. For that, I'm going to use top property, Top 50%. Then I'm going to use Lip property. Let 50%. If I set this file, you can see the result. As you can see it align our anchor tag, middle of this web page. Next, I'm going to use transform property. So type, transform here, transform. Transform translate. As you know, using translate method, we can move an element from its current position, according to x x and yx. For x xs, I'm going to pass -50%, and for y axis, also I'm going to pass -50%. Then I'm going to say heighten width to his angle tag. At first, I'm going to type we. We 200 pixel, and then I'm going to say height property, height, height 60 pixel. If I set this file, you can see the result, and then I'm going to say text lign center, text align center. As you know, we are going to create a three d over button. For that, we need to use another property, which is transform style. So to type, transform style. Transform style. Here I'm going to use preserve three d v. This property specify how nested elements are rendered in three D space. As you know, we need to use this property with transform property. Without transporm property, we cannot use this property. We'll learn about it in our tutorial series, and then I'm going to use another property, which is prospective, prospective 1,000 pixel. Also, I'm going to say transform origin position, transform origin, center center. If I set this file, as you can see, now it perfectly align our content middle of this web page. We cannot understand the perspective and three transformation because we do not style our span object. Now we need to style our span object. As you can see, we have pro three span object. Let's style all the object at once. For that, I'm going to select span tag. Span. Inside the cavas, at first, I'm going to type position property. Position absolute. Next, we need to align this span tag. Top Zero, p zero. Also, I'm going to say y and weight, height 100% weight 100%. And then I'm going to use dis blog, display block, and also I'm going to align the text inside this pan tag. I'm going to tie text align text align center, and then I'm going to say line height. Line height, 60 pixel. If I set this file, here you can see it overlap our text. Next, I'm going to say font size font size, 24 pixel, and also I'm going to set a background color to the span tag. Background. I'm going to use RGV value. RGB, as you bell, first, we need to pass red value, then we need to pass green value, at last blue veal. With that, we need to pass Alpha value. We can control the transparency using Alpha value. That's why we need to use this vile. Here, I'm going to pass 255 for red, 255, and then I'm going to pass once again, two fi five for green, and also 255 for blue. For our Alpha u, I'm going to pass 0.10. Now we need to change the transform style. I'm going to tie transform style transform style, ps three. Now I don't want to show the back side of our span tag. When you rotate, we don't want to show the back side. For that, we need to use a property, and you know that, which is back space visibility. Back back spas visibility, and I'm going to set hidden value because I don't want to show the back side, and then I'm going to set the border radius of the span tag, border radius, 30 pixel. Our next property is text transform. Next, I want to transform the text into a uppercase. For that, I'm going to use text transform property. Text transform, uppercase. Next, I'm going to set a color to our text. Color ite. If I set this file, you can see the result. With that, I want to say transition property, transition. 1 second. As you know, we have total three span object inside the anchor tag. I'm going to transform all the span tag different theme. At first, I'm going to transform the front one, and then I'm going to transform the back one. At last, I'm going to transform the center one, and we're going to run the transformation using selector. Let's back to the CSS file and start with our first span tag. So type, span dot front. Then inside the calses, I'm going to use transform property, transform, transform rotate x, and I want to rotate it zero d. With that, I want to move it at z x direction. I'm going to type, translate z, 20 pixel. If I set this file, you cannot see the result because I want to make this transformation when I hover my cursor on this button. Now I want to rotate this button when I hover on it. For that, we need to create a hover selector. So to get this line and I'm going to tie anchor tag colon hover. When I hover my cursor, I want to rotate our front span tag minus 180. If I set this file, and hover my curs on it, you can see the result. You can see our first pan tag rotate minus 180 degree. Same thing we need to do for our back pan tag. I'm going to select this code and we get this line. Here I'm going to tie span, dot, back. By default, I want to rotate it 180 degree, and I'm going to use same video transfers it 20 pixel. In our hober selector, I want to rotate it zero d, back, and I want to rotate it zero. If I set this file and hober micers are on it, now you can see the rotating three D effect. Now I want to st a background color for our center pan tag. This one. For that, I'm going to tie span dot center. Inside the calibraces, I'm going to use background property, background, and I'm going to use gradient color, and I'm going to use linear gradient. And I'm going to use lip direction. I want to pass to lit. Comma. Now I'm going to use hexa color value. Ha tag C 30 1a5b. It's a pink color, and our next color is has tag 71 29bd. It's a purple color. If I set this file, you can see the result. Now, for our center span object, I want to turn on Backspace visibility. I'm going to type Backspace visibility, and I'm going to use visible value. Then I'm going to create hover selector for our center span tag. And I'm going to remove front keyword, and I'm going to type center. For Rotate, I'm going to use minus 18d. But for translate Eight, I'm going to use zero pixel. If I set this file and Hober mikes are on this button, you can see the three D effect. We successfully create three D flip Her button. I hope you like this project. Thanks for watching this VD, St tuned for our next exercise. 27. Editable animated text : Nice to see you guys, again, I'm back with a new exciting animation project. In this project, we are going to create irritable animated text with Cases glowing effect. Let's d to the computer screen and see the demonstration. Here you can see how our text is glowing, and also you can see the reflection of this text. Not only that, also our text is irritable. Let me show you. Suppose if you want to type your name, you can remove the text from this place and you can type your name. It's a very good practice and example of SSS animation. You can use this animation on your website. It can give your website very creative blue. Without further top, let's start the project, and see how we can create it. As you can see, side by side, I open by so to codaor and my browser using Light Server extension, and I already create a estimL document named index dot estimL. With that, I link a CSS file, style dot CSS. At first, inside the body tag, I'm going to create a headed tag, H two header, and inside this tag, for now, I'm going to type text. If I set this file, you can see the result. Text. It is a static content. We cannot edit it from our browser. If you want to make it irritable content, in that case, we need to use a attribute, and our attribute name is content irritable. Let me show you. Here I'm going to type content it table, and I want to make it true. If I make it true and then set this file, now we can edit our content from our browser. Let me show you. I want to convert text to name. You can see the result. We successfully done our table part. Let's jump into our design part. I'm going to jump CSS file, style CSS. At first, I'm going to use universal selector, to type star. Inside the Calass, I want to set margin. Margin, zero. With that, also I want to set padding, padding zero. Also, I want to use oxizing property, box sizing, boxizing, border box. Then I'm going to use font family, font family. Font family, and I want to use Aerial font. Aerial heave and sensitive. If I say this file, you can see the result. Next, I want to style our body tag body. Instead the aliases, I want to start with display property. Display display flex. Hey, if you are not familiar with flex and read, you can check out my course. Then justify content center. Also, I want to align this item center. I want to use align item property, Align item center. Our next property is minimum height. We need to set minimum height, M height. Minimum height, I want to use 100 VH. With that, I want to st dark background color. Bground, and I'm going to use gv ve. For rate, I'm going to use five. For green, I'm going to use 30. For blue, I'm going to use 71. If I set this file, you can see the color. You can see the dark bluish background color, and also it center our content middle of this page. Because we use flexbox to align our content and then come the most important part, H to heading tag design. H two inside the caliss, our first property is position, position relative, and our second property is font size. Font size six M. If I set this file, you can see the result. With that, I want to st letter spacing, Letter spacing. Letter spacing, 15 pixel. Our next property is color means pond color. Color, and I'm going to use r giv value. For red, I'm going to use four. For green, I'm going to use 50, and for blue, I'm going to use 124. If I set this file, you can see the result. This color is pretty identical with background color, and now I'm going to transform this takes into uppercase. Text tans form uppercase. If I set this file, you can see the result, and then I'm going to st wa wa 100%. Text align center, and then come the very important part of this video. Now, we need to reflect this text. I want to create a medal reflection. For that, we need to use a new property n box reflect. Let me show you. Hey, as you can see, I work with Chrome browser. That's why we need to use a prefix. Web ket, our property name, box reflect. D reflect. At first, we need to declare the direction of our reflection, which is u, and then we need to provide the length of this reflection, which is one pixel. If I set this file, you can see the result. It create a perfect reflection of our text. Our first value is reflection direction value. Our second value is set value. Third, we need to provide the Mug value. For Mux value, I'm going to use linear gradient. Here I'm going to type linear gradient. Inside the parentheses, or first value is transparent. Our second value is v. Inside the parentheses, we need to provide the argv value. But at first, I'm going to turn on the white wrap. Now I'm going to pass the Vu, O first value is red value. For red, I'm going to use 11. For green, I'm going to use 70. For blue, I'm going to use 18. At last, we need to pass the Alpha value, as you know, Alpha value use for transparency. For Alpha value, I'm going to use 0.267. If I set this file, you can see the result. Then I'm going to use semicolon to end this line. Our next property is line height, line height. For line height, I'm going to use 0.70 E. Next, I want to turn on the outline of this text. I want to use outline property. None. If I set this file, you can see the result. After removing the outline, our reflection attach with our content. Now our reflection looks realistic, and then come our final part, which is animation. At first, I want to create a key frame at the rate key frames. Our animation name is animate. Then inside the class. As you know, we have total two type of keyframe selector. You can use from or two keyword. Otherwise, you can use percentage value. For this example, we need to go with percentage value. Not only, we need to work with multiple percentage value, and I already prepare the percentage value for this example. I'm going to copy it and I want to paste it here. Paste. Then inside the cases, we need to use our property. At first, I want to change the text color. So I'm going to use color value. Color, and I'm going to use AGV value. And I use the same color, which I use in our heading tag. Our next property is text shadow. So type, text shadow. Take shadow, none. As you can see, I apply this property, 0% of animation, 18% of animation, 20% of animation, 50.1% of animation, 60% of animation, 65.1% of animation, 80% of animation, 90.1% of animation, and 92% animation. Now, let's call the animation and try to see, is it worked properly or not? I want to use innovation property. Animation, and our aniation me is animate, and our an nation duration tm is 1 second, and our animation direction is linear. For our aniation duration time, I'm going to use infinite wheel. Infinite. If I save this file, let's see what happened. As you can see, nothing is happening. Because to create the growing effect, we need to play with text shadow value. For that, we need to use some more percentage selector. I already copy the percentage selector and I'm going to paste it here. Then inside the class, I'm going to use color property. Color, color, white, has tag, F f f. Now we need to play with tex shadow property. Some type tax shadow. Take shadow. At first, you need to pass the x xs value, which is zero, and then you need to pass the y xs Vu. I'm going to use zero. Third, you need to pass the Blarns value. Here, I'm going to use ten pixel. At last, you need to pass the shadow color. For shadow color, I'm going to use RGV vu. RGB inside the parentheses, I'm going to type, red value C six, green value 149, and and blue value 231. If I set this file, you can see the result. You can see how it's bleed. Also, you can see the reflection. And now I want to create this effect more attractive. I want to duplicate this line, C P C In the next line, I want to duplicate this line. Now I just want to increase the blur value, 20 pixel. If I set this file, you can see the result. Now you can see a growing light effect edge of this text. After coma, I want to duplicate this line. Once again, I want to increase the value of Blarns 40 pixel. Then once again, I want to duplicate this line, and now I'm going to use 80 pixel. At last, I'm going to use 160 pixel. If I remove the last coma and set this file, you can see the effect. As you can see, now our growing effect look more attractive. Not only that, it's also editable. Suppose you want to type your name. I'm going to remove this one, and I'm going to type Smith. You can type any text here because we use itable content, as you can see, content editable true. I hope now it's clear for you how we can create this growing effect. Thanks for watching this video, stay tuned for our next project. 28. Animated Eyes Follow Mouse Cursor : Good to see you guys once again I'm back with a new exciting Chases animation project, and our project name is animated eyes follow mouse cursor. Let's see the demonstration. Here you can see a face. If you notice, you can see its eyes follow the cursor point. If I move it right side of this page, you can see it's follow. If I move it upside of this face, it's also follow. If I per my cursor on this face, you can see it changed the mouth reaction. Let's see how we can create this project. As you can see, side by side, I open my Visual Studio creator and my browser using pSever extension, and I already create estimL document named Index dot estel I already link this estimL document with the Sess file, Style dot Sess. First, inside the body tag, I'm going to create a D, D class and our class name is phase. At first, I want to create the face. Then inside this deep tag, I'm going to create another deep, D, class. In this section, we're going to create is of our face. Then inside this section, we're going to create two is. D, plus I, and I'm going to ret this slide. We successfully done over a stable part. First, we create a tag for phase. Then inside this fast tag, we create a block for s, and then we take to another deep tag for two s. Now, let's jump into the style section. At first, I'm going to take a universal selector, star. Inside the cases, at first, I'm going to use margin property. Margin, zero, and then I'm going to use padding property, padding zero and box sizing border box. Next, I'm going to starle the body tag. Body inside the cases, display flex. Justify content center. I use flex container to align our phase center of this page. Next, I'm going to use Align item property. Align items center. Minimum height, mean height, 100 VH. I want to use whole web page. That's why I use 100 VH, and our last property is background. Bground. For background color, I want to use RGV value. RGV for red, I'm going to use eight, and for green, I'm going to use 84 value. For blue, I'm going to use 19. If I set this file, you can see the background color. For this project, I'm going to use dark blue background color, and now I want to style the face part. I want to style dot face, Inside the calibraces. At first, I'm going to use position property, position relative, and our next property is wed wit, 300 pixel. Also, I want to say height, height, 300 pixel also. Our next property is background. Bground, Once again, I'm going to use RGV value. RGV, for red Value, I'm going to use 255. For green value, I'm going to use 198, and For Blue value, I'm going to use 54. If I set this file, you can see the square box on your screen, and now we need to convert the square shape into a round shape. For that, I'm going to use border radius property. Border radius 50%. If I set this file, you can see the result. Also, I'm going to use display property. Display flax. Justify content center. Also, I'm going to use align item property center. Hey, if you are not familiar with CSS Flexbox and greed, you can check out my responsive Cs sores. We successfully shape our phase. Now we need to put mouth in this phase. For that, I'm going to create phase Colon cool before selector, before. Then inside the car resis, As you already know, first we to take a blank property, and our property name is content, contain blank. Then then our next property is position, position absolute. Then I'm going to say height and weight, weight 150 pixel, height 70 pixel, and now I'm going to take background color. Bground, chocolate. If I set this file, you can see a rectangular shape middle of this face. Now we need to move this face little big down. For that, I'm going to use top value. Top 180 pixel. If I set this file, you can see the result. Here you can see our mouth look like a square box, and to create a perfect mouth shape, we need to use border radius property. At first, I want to set a border radius in this corner. For that, I'm going to use border bottom left radius. Border bottom lept radius, and I'm going to use 70 pixel. If I set this file, you can see the result, and then I'm going to bet this line and replace lap with right. If I set this file, here you can see it create a smile shape. Now I want to change the mouth motion when I open my cursor on it. For that, we need to create other selector. Let me show you. Dot face Colon hover, colon before. Inside the caliss, I'm going to reuse this value and property. I'm going to copy the property and value. And paste it here. Now, one by one, I'm going to replace these values. First, I'm going to change top value, 210 pixel. If I set this file and hover my curser on it, you can see the difference. It's change the position of mount. Next, I'm going to change this water radius. Bottle bottom lip radius zero. Also, bottle bottom right radius zero. If I set this file and hover my curser on it, you can see the difference. But there is no transition in this transformation. For that, we need to use transition property. Here, I'm going to type transition. Transition 0.5 second. If I set this file and hover my cars are on it, you can see the transition effect. It's take 0.5 seconds to complete the transformation. We successfully complete our mouth section. Let's jump into the ice section. As you can see inside the ice container, we have two. Let's create the is of this face. At first, I'm going to style section dot. Then inside the Calass position relative, and I want to position it top -40 pixel, and I'm going to use display property display flex. Using this property and values, we successfully move our ice section in that place, not the middle of this face. Then we need to create the i. I'm going to select ice class, also I'm going to select i class. Then in set the calibraces or first property is position, position relative, and also I'm going to say height and width for this i. Wed A typic ell, height a type. After w and height, I'm going to stat background color. Background. It. If I set this file, you can see the result. Basically, side by side, it creates two square box with a typical then height. Then I'm going to use display property. Display block. Next, I'm going to use border radius property. Border radius 50%. If I set this file, you can see the difference. Here you can see side by side, it create two eyeballs, but there is no gap between two eyeballs. For that, I'm going to use margin property. Margin, zero and 15 pixel. If I set this file, you can see the difference. Overall, this margin value provide 30 pixel space between these two eyes, and now we need to create the eyeballs for this eye. At first, I'm going to copy this line. And I'm going to paste it here. W I, I'm going to use before selector. Colon Colon before. Then inside the caliss, as you know, first, we need to create a blank content, content blank. Our next property is position, position absolute. Also, we need to place it, so I'm going to use top value, Top 50%. Left 25 pixel, and for our eyeballs, I'm going to sit 840 pixel. Also height 40 pixel. Next, I'm going to use the ground color for our eyeball, background, and I'm going to use RGV. GV, for green, I'm to pass 42. Then for red, I'm going to pass 42 once again. Also for blue, I'm going to pass 42. I set this file, you can see the result. As you can see, it create two dark gray square box. But we need to make it round shape. I'm going to use border radius. Border radius, 50%. If I set this file, you can see the result. He you can see our ice look downs in that angle. But I want to change the ice looking angle, something in that position. For that, I'm going to use transform property. Transform translate -50% for x xs, also -50% for y xs. If I set this file, you can see the result. Now let's look in that angle. If I er my cursor in this modi phase, you can see the reaction, but the ice ball do not follow the curser position. For that, we need to use JavaScript. We successfully complete our styling part. In the next part of this video, we are going to work with JavaScript. Thanks for watching this video, stay tuned for the next part. 29. CSS 3D Wavy Circle Loader Animation Effects : Let to see guys. Again, I'm back with a new CSS animation project. In this project, we are going to create web circle loader animation. Let's dc to my computer screen and see the demonstration. Here you can see it create a very beautiful effective wave using three D circles. Let's see how we can create this animation. As you can see, side by side, I open my VSO Studio Creor and my browser using Light Server extension, and I already create a STL document named Index Dot STL. Also, I link this document with the Tyler SSS file. So first, inside my body tag, I'm going to take a deep tag, D, and so I'm going to set a class to this deep class loader. Then inside the dip tag, I'm going to take multiple span. Basically, I'm going to take empty span tag to create some circles. For this project, I'm going to take Peptin span tag, so I'm going to duplicate this line forte time. We have total 15 span tag for 15 circles. We successfully done our estimate part. Now, let's jump into the CSS file, style dot Css. Here, at first, I'm going to select universal selector, which is star. Then inside the calibraces, I'm going to use margin property. Mrgin, zero. Then I'm going to use padding property. Padding zero. Then I st this file. Next, I'm going to select the body tag. Herbal type body. Then inside the calvass, at first, I'm going to use display property. Display flax. Justify content center. Our next property is aligned item. It is also center, and then I'm going to say minimum height to our web page. For that, I'm going to use mean height property, I N height. Man height, 100 VH. I want to select whole page for this project. That's why I use 100 VH. Our next property is background. Background, For background, I'm going to use RGV value RGB. For red, I'm going to type 70. Similar for green, I'm going to type also 70, and for our blue value, I'm going to type 70. If I set this file, here you can see our background color is dark grey, and now I'm going to style the loader class. So to select dot loader. And set the calibraces at first, I'm going to use position property. Position related. Also I'm going to set height and weight to this loader, weight, 300 pixel. Height, 300 pixel also. Now I'm going to use the most important property, which is transform style. Transform style. In our transform style property, I'm going to use Pi three D value, because I want to give our circle three D. Our next property is transform. Transform our first value is prospective. Prospective, 500 pixel, O next value is rotate v rotate x, here I'm going to pass angle, 60 degree. Next, I'm going to style all the span tag inside the loader class. I want to tie dot space. I'm going to select all the span. Then inside the calibraces, our first property is position, position absolute. Our next property is di display block. And now I'm going to set border to our span tag. Border, five pixel. I'm going to set border with five pixel, and I want solid border, and our border color is white. So to type AF A. If I set this file, you can see the result. Here you can see, just to create multiple boxes at the same place. For now, it's not clear for us. Our next property is box shadow, box shadow. I'm going to position this shadow, zero Pi cell, five pixel, and zero pixel. Also, I'm going to use a color for this box shadow. H tag CCC. A provide lightr color to our shadow. Now, with that value, I want to use another value, which is inset. Also, I want to st shadow inside part of the rings. That's why I use inst value. Then I'm going to copy the value, and I'm going to paste it here. I'm going to set this file. Our next property is box sizing. Box sizing, and here I'm going to use border box value. Also, I'm going to use another property, which is border radius, border radius, border radius 50%. If I set this file, you can see the result. I know it is still not clear for you. And now I'm going to increase the circle size one by one. For that, we need to select all the span tag one by one. Let's select all the span tag one by one. Some type, dot, loader, or span tag, span. Colon, and now I'm going to use h child selector, the H child. At first, I'm going to select our first pen tag, so I type one here. Then inside the calivass, we need to position our first pen dag. At first, I'm going to use top property, top zero. Our next property is Lp, Lip also zero, and then come our another property, which is bottom bottom also zero. Our last positioning property is right, right, also zero. W that, I'm going to use another property, which is animation delay. Animation, D. For now, I'm going to leave it blank. I will tell you later why I use this property. If I set this file, as you can see, it create our first circle, and this is the biggest circle from our boop, and to create our second circle, I'm going to duplicate this whole section. At first, I'm going to change the selector, eh ch two. With that, I'm going to change top value left Valu Gottma and veue. Let me show you. Top ten, lap, ten, bottom position, ten, right position, ten. If I set this file, here you can see nothing is happening here. It do not create a circle because we do not provide any unit. Here we need to provide unit. I want to provide pixel here, ten pixel, ten pixel, and ten pixel. If I set this fil, now you can see the result. There is another circle inside this circle. Then one by one, I'm going to create this circle. I'm going to duplicate this section, and here I'm going to select child three. Also, I'm going to increase the position values, 20 pixel, 20 pig self bottom and 20 pig sulfo. If I set this fille, you can see the result. It add third circle in this group, and now I'm going to fast forward this section to complete the process. As you can see, we complete the creation process. If I set this file, you can see the result. You can see all these circles are aligned perfectly. Here you can see, and here you can see every time I add ten pixel value to our previous value. In our 13th selector, we use top value 120 pixel. But in our next selector, in our 14th selector, we use 130. In that way, in our 15th selector, we add ten pixel, and we pass 140 wave. We successfully create our circle. Now we need to animate it. Just we need to play with the Z index value to create the wave. So let's create a keyframe for this animation. I'm we to the top section and here, I'm going to create the keyframe at the rate keyframe. Then we need to tie the key Fram name and our key Fram name is animate. Then inside the ss, we need to select the position. To select the position of animation, I'm going to use percentage value. First, I'm going to select two position, 0% position, and 100% position. Then inside the Crass, at that position, I want to transform the circles. Here I'm going to use a property transform. Transform, and I'm going to use translate Z value. Translate Z. And I want to translate it -100 pixel at z x direction. Next, I'm going to select 50% position, 50%. Then he set the calibraces. Once again, I'm going to use transform property. Transform translate hundred pixel. Now we need to call this animation in our span tag. Here, I'm going to type animation. O animation name is animate. And I want to run this animation for 3 seconds. With that, also, I want to st easing out animation move. At last, I'm going to pass animation iteration count, which is infinite. If I set this file, as you can see, all the circles move together up and down, because we use Z index. Here you can see, it's move all the circle together at the same time. Now we need to use delay property, animation delay. Using this property, we can delay our animation, and it's very necessary to create the wavy circle. Here, at first, I'm going to use 1.4 second delay. If I set this file, as you can see, after 1.4 second, it start the animation for our first child. Similarly, for our second child, I'm going to pass 1.3. Second. For our third child, I'm going to pass 1.2 second. For our fourth, I'm going to pass 1.1 second. For our fifth child, I'm going to pass 1 second. For our sixth child, I'm going to pass 0.9 second. For our seventh child, I'm going to pass 0.8 second. For our eighth child, I'm going to pass 0.7 second. For our ninth child, I'm going to pass 0.6 second. For ten, I'm going to pass 0.5 second. For our 11 child, I'm going to pass 0.4 second. For our th child, I'm going to pass 0.3 second. For our 13th child, I'm going to pass 0.2 second, and for the 14th span selector, I'm going to pass 0.1 second. For our last one, I'm going to pass zero second delay. I successfully set an evation delay property, all of this span tag. If I set this file, now you can see the result. As you can see, now it's create perfect web circles. And now it's look pretty amazing. It's created a very beautiful infect top weaves. I hope now it's clear for you, how we can create this web circle animation. Thanks for watching this video, stay tuned for our next project. 30. CSS 3d Layered Image Hover Effects : Hello. Again, I'm back with a new CSS animation project. In this project, we are going to create CSS three D layer image H, and it is a good project for UI UX designer. Let's see the demonstration. Let's back to the computer stream. As you can see, there is a mobile UI template. If I hover my curser on it, you can see a layer three D effect. You can see this kind of animation most of the website. It create our website more attractive. So let's see how we can create this project. Finally, I am in my Visual Studio code retor as you can see, I already create a STL document name index dot STL. I already link a CSS file with our est document, style dot CSS. As you can see in my current working directory, there is an image, screenshot dot PG. Let me show you the image. For this example, I already take a screenshot of CS file Epler. You can choose your own layout. It's up to you. Let's start the practical, how we can create this project. At first, I'm going to create a container inside my body tag. Here I'm going to tie the and DP class is class container. Then insert this container class, I'm going to use em tag to insert image. Ham type image, I M G. As you can see, our image name is ren shot dot JPG. Ham type, screenshot, JPG, and I'm going to get this image tag three time. We successfully done our SML part for this example. Now I'm going to turn on my ip server and see how it's look. Without styling, it's look like this. Now we need to jump into this style file to create the perfect design. Now you can see side by side, I open my style file and my browser. At first, I'm going to start with body tag. Here I'm going to type body. Then inside the calibraces, I'm going to use our first property, which is margin. Margin zero. Our next property is padding, padding zero. Now I'm going to use another property, which is wed wed hundred percent height, 100 VH. And then I'm going to use display property. Display flex. And I want to align our items center. I'm going to use align item property, Align items center, and our last properties justify content. Justify content center. Hey, if you are not familiar with, Flexbox and read, you can check out my code. If I set this file, as you can see, nothing is happening here. Now we need to style the container section. Here, I'm going to type container dot container. Then in set the calibraces. At first, I'm going to use position property, position relative, and then I want to say wa wa, 360 pixel. Our next property is height, height, 480 pixel. If I set this file, you can see the result. It scale down our container size little weight, and then I want to set some margin in my top section. Here I'm going to use margin top property, margin top 150 pixel. Next, I'm going to set a background to this container. Hamer type background, For background, I'm going to use, RG B A. Then inside the parentheses, we need to pass total four property. For red Vue am to plus zero. For green Vu, also am to plus zero. For our blue value, once again, I'm going to pass zero. But for our Alpha value, I'm going to pass 0.1. I want a transparent background color for this container. Our next property is transform property. H Amy traform. Transform, and I'm going to use total six ve. First, I'm going to use rotate. Rotate -30 degree. With that, I want to use SQ and scale will do. SQ 25 dg. And scale 0.8 time. If I set this file, you can see the result, and now we need to position the image tag inside the container tag. For that, I'm going to select container with image tag dot container space image. Then inside the aliases, our first property is position, position absolute, and image with 100%. If I set this file and show you my browser. Now you can see it perfectly in position as we want, and then come the most important part. Now we need to play with opacity and transformation with hover effect. Let me show you how. As you can see in my estimable document, we have total four image. Now we need to select all the image one by one. For that, I'm going to use Chi selector. Let me show you do Container Colon hover. Then space image colon eh child child. I set the down races four. First, I select fourth child from the image group. Then in set the calices, I'm going to use transform property. Transform translate 160 pixel in exxs direction and minus 160 ill at its direction. With that, I'm going to use opacity property. Opacity, One, I want to show the full opacity. That's why I select one. Next, I'm going to select our third image. I'm going to select this line and duplicate it. I Child three. Also I'm going to change transform value and opposity value. Opacity, 0.8, and translate for x x six, I'm going to pass one to 20 pixel. For yx, also I'm going to pass minus one to 20 pixel. Now once again, I'm going to select 1 second dm. I'm going to get this line and Hm type two, n h two. For x xx, I'm going to pass eight t, and for xx, I'm going to pass minus eight. Hm to say opacity 0.6. Once again, I'm going to duplicate this line to select our first image. N chile one. In our transformation, I'm going to select 40 pixel and -40 pig sulfur y axis. Opacity, I'm going to type 0.4. If I set this file and back to my chrome browser and ber my cursor on this image, you can see the effect. But there is no transition in this image. Now we need to set a transition to give a smoothness effect. Once again, I'm back to my codaor, and here I'm going to call our transition property. Transition 0.5 second. Also, we need to call the same property in our container section. Transition 0.5 second. If I set this file and back to my Chrome browser, if I hover my curser on this image, you can see this smoothness transition. I hope now it's clear for you how we can create three d layered image hover effects. Thanks for watching this video, state tuned for our next project. 31. CSS3 3D Rotation Animation Effects : Hello guys. Again, I'm back with a new Sess animation project. In this project, we are going to create three D rotation animation. Without wasting your time, let's see the demonstration. In this project, we are going to create three D rotation animation. Here you can see the demonstration, how it's rotate, and how it's look. Without wasting your time, let's study the practical and see how we can create this kind of three D animation. Here you can see side by side, I open my visual studio Correlator and my browser using Live Server extension, and I already create a estim file named index dot estim. I also link this file with our style file style dot Sss. So first, inside the body tag, I'm going to create a D, D, and also I'm going to set a class class box. Then Is this dip tag, I'm going to create another dip tag, D, and I'm not going to set any class name for this dip tag. Then inside this dip tag, I'm going to create total four span tag span. I'm going to duplicate this pan tag three time. Now we have total four span tag. If I set this file, you can see nothing in my browser. We successfully done our este part. Now let's jump into the styler Sass file and start styling our elements. First, I'm going to start with body tag. Here I'm going to type boding. Then you set the casas, first, I'm going to use margin property. Margin, zero. Then I'm going to use padding property. Padding zero. Our second property is background. Background, and I'm going to say a background color. For that, I'm going to use R GV value, RGB. For red, I'm going to use 66. Also, for green, I'm going to use 66. For our blue, I'm going to use 66. If I set this file, as you can see, it fill our page with dark gray color. You can use any color as you want. Now I'm going to style this box section. For that, I'm going to select dot or class them is box. Then at the calibss, our first property is position. Position absolute. Our next property is top top. I want to position it middle of this page. That's why I'm going to pass 50%, 50%. Our next property is t Let also 50%. Then I'm going to use transform property. Transform. Here I'm going to use prospective prospective, prospective 1,000 pixel. With that prospective our three motel not work properly. Next, I'm going to say height and width, Weed, 200 pixel. Then height, height, 300 pixel. Also, we need to use another property, which is transform style. Transform style, I'm going to use preserve three D, and now we need to style this one, this deep, which is inside this parent D. Here I'm going to select got box, space D. Then inside the calis O first property is position, position absolute, and our second property is top top zero. And also I'm going to use p zero. Then I'm going to say height and width to this deep element. Wight 100%. Also height 100%. Now, let's say a background color and see how it slow. Background. I'm going to use white color. If I set this file, you can see the result. Here you can see it create a box, but it is not align in middle of this page. Now we need to align this box, middle of this page. For that, here I'm going to use al value. Let me show you. Here I'm going to type al function. C A L C. Then inside the round ss. We need to calculate the position. As you can see, our height is 300 pixel. Here I'm going to mind us 150 pixel. From 50% of position, half of the height, which is 150 pixel. Similarly, I'm going to use L function for our left position. C A LC, set the round press, 50% minus. Here you can see, our width is 200 pixel. I'm going to -100 pixel wi. Now, if I set this file, as you can see, now our DV is perfectly middle align of this page. Then back to the deep section, and here I'm going to use transform stele property. Transform transform, Style, transform style serve three D, and now we need to style our span tag, which is inside this dip tag. Here, I'm going to select dot box, space, D, space span. Then inside the calibraces, our first property is position, position absolute. And top zero. Late also zero. Our next property is display display, and he I'm to use block. Also, we need to set within height. We 100%. Height hundred percent, and then I'm going to set background. Bground, for background, I'm going to use linear gradient color, linear gradient. At first, we need to pass the gradient angle, and our gradient angle is zero degree. C, and here, I'm going to provide total three color, O first color is duller, F one, F one, F one. Let's turn on the ward rap. Now you can see it clearly. Then our next color is has tag BBB, is a light gray color. O third one is also going to use this color again. Copy the color and paste it here. If I set this file, here you can see the gradient color. It start with light gray color, then little d gray color, and once again, light gray color. Then I'm going to say border radius to this gradient color. Let me show it. Border radius, 20 pixel. If I set this file, you can see the border radius at the corner. Now, let's remove the background color from the parent d item. So to comment out this line and set once again. Now you can see the result. Now we need to select all the span tag one by one. For that I'm going to select. I'm going to type dot box, space, D, space, span. Colon, h child, h child one. Then inside the round ss, I'm going to use a property name transform. Transform I want to rotate our first child at x axis direction. Here I'm going to type rotate x v, rotate x, and I want to rotate it zero degree, and then I'm going to select the whole section and duplicate it. Now I'm going to select our second child. I want to rotate this one at s direction, 45 degree. Then I'm going to duplicate once again. Now I'm going to select third child. And here I'm going to say rotation angle -45 degree. If I set this file, you can see the result. One by one, we rotate our spare items. Then I'm going to select all this section and duplicate it once again and this time, I'm going to select fourth child. Now I'm going to say rotation angle 90 degree. Also, I'm going to say this file. Now I'm going to rotate the whole section at y x's direction. For that, after prospective, I'm going to use rotate y, rotate y. -45 degree. If I set this file, you can see the result. Now it's look like a three d object, and you can see and you can see all the part of the span tag. And now we need to work with our final part, which is animation part. Here, I'm going to call our animation property animation. O animation name is animate. And our animation duration time is five second, and our animation direction is linear, and I want to run this animation for infinite time. Here I'm going to use animation iteration count infinite. Now we need to create the keyframe for this animation. I'm going to copy the animation name. At last, I'm going to create the key frame at the rate key frame. Keyframes, and our animation name is anime. Then inside the crass, here I'm going to use percentage value at 0% position, Is the calibraces. I'm going to use transform probity, transform. Transform first, I'm to say prospective, prospective 1,000 pixel. After prospective, I'm going to st rotate x value, rotate x zero tv. Then I'm going to dubgate this section, and at 100% position, I'm going to set rotate x 359 degree. If I set this file, you can see the result. Here you can see it already rotate our object. This three D rotation looks very nice. I hope now it's clear for you how we can create this three D rotation and ion. Thanks for watching this video, state tuned for our next project. 32. Animated rainy cloud part One: To see you guys once again, I'm back with a new Sess animation project. In this project, we're going to create rainy Cloud. It's a very advanced thesis animation project because we're going to use Variable share. Let's see the demonstration, how it's look. As you can see on your screen, raindrops fall from the clouds and disappear on the ground. You can rendomly notice raindrops. Without wasting your time, let's see how we can create this project. As you can see, side by side, I open my Visa Studio code editor and my bowser using life Server extension, and I already create Index dot estemL file. I also create style doot Sess file. As you can see, we link our style file with this estemL document. As you know, we need to start with estS structure. At first, I'm going to create a container, which is going to contain Cloud and R. I'm going to create a class, D dot container. As you can see, we create a class name container. Then inside this container deep, I'm going to create Cloud. Here, I'm going to create another deal. De dot Clou I'm going to set this file. Now I'm going to jump into the style section, style dot CSS file. At first, I'm going to select the document page using Universal select Firm type star. Then I set the Cals, first, I'm going to use margin property. Margin, zero. With that, also, I'm going to use padding. Padding, also zero. Then I'm going to use box sizing property. Box sizing, and here I'm going to use Bodi box V. By falls, there is no merging lap on this document. Now I'm going to style our body tag. Here I'm going to type body. Then instead the aliases, at first, I'm going to use display property display. Display flex. Next, I'm going to use justify content. Justify content center. Also, we need to use another property, align items. Align items center. If you are not familiar with flex box and greed, then you can check out my course. Then I'm going to say minimum height to this page. So to type mean height, mean height hund VH. Our next property is background, background, and I'm going to say background color. I'm going to say something dark gray color. Dark gray. I want some darker color, I select this color, this one, and I'm going to say this file. This color is good for our example, and you can choose your own color. Now we need to style the container section. I copy this container class name, and here, I'm going to type dot container. Then inside the cis or first properties position position really. Also, I'm going to say height to this container. Height, something for under pixel. And I'm going to say this side. Now we need to design the cloud portion. So to copy the class name cloud, and then a container, I'm slate dot cloud. Then inside the aliases, our first property is position, position relating. Also, I'm going to say it within height to this cloud. We need 320 pixel. And height, 100 pixel. Then I'm going to say background color, background, and I'm going to use white background. For that, I'm going to use hexa D H tag FF eight. If I set this file, as you can see, it creates a rectangle, and we need to give it round shape. That's why I'm going to use border radius property. Border radius, border radius, 100 pixel. Let's set the pal and C. Also, I'm going to position it from the top. Here I'm going to use top property. Top 50 pixel. I will set this one, and to give it cloud shape, we need to use posto selector. Here I'm going to create a post selector for the cloud. D cloud Colon colon. Then inside the vases, I'm going to create bland contain contain bland. Basically, I'm going to create a copy of this cloud. A next property is position, position, and this time, I'm going to use obsolete, obsolete. Next, I want to move this new cloud to this position. For that, we need to use the property. Top -50 pixel. Then I'm going to say with and height to this cloud. W 110 pixel. Also I'm going to say height, height, so 110 pixel. And then I'm going to say background color. Background, and for background color, I'm going to say also white. I'm going to set this file. Now we need to give it round shape. For that, we need to use border radius. Border radius 50%. I'm going to st this one. To place it middle, we need to move this circle left side. Here I'm going to use lift property lap Lap 40 pixel. If I set this file, you can see the result. Now here do we need to create another circle shape to create a perfect cloud. For that, I'm going to create solid box shadow. Let me show you how. Here I'm going to use box shadow property, box shadow. At first, we need to position this shadow. From top, I'm going to give 90 pixel. From right, I'm going to give it zero. From bottom, also I'm going to g zero, and from left, I'm going to g 30 pixel. At last, I'm going to give it solid color to this box shadow. H type has tag, white color, FF. If I set this while, you can see the result. As you can see, we create perfect cloud shape using a sml anthesis. In the next part of this project, we are going to create in. Thanks for watching this video, see you in the next part. 33. Animated rainy cloud part Two: What to see you guys. This is the second part of this project. In the previous part, we successfully create the Cloud. But in this part, we are going to create the rain drops. Without wasting your time, let's start it. At first, I'm going to create a deep tag, which is going to contain rain drops. De.in. As you can see, we create a deep element with rain class. Then inside this deep element, I'm going to create multiple span tag for our rain drops. Here, inside this deep tag, I'm going to create pan tag. Then I'm going to use style attribute in this plan style. Here I'm going to use Css variables. I know it sounds a little advanced, but it's pretty effective. To clear a Sess variable, we need to use das sine. Let me show you how. D and our variable me is I. Then then we need to use colon. Then we need to use col to set our variable. After colon we need to provide the value. F value, he I'm going to type a random number, something 11. Total, I'm going to use 20 rain drops, but you can use as much as you want. I want to duplicate this line. Here I'm going to pass. Again, I'm going to duplicate this line. Here I'm going to pass t. You can use random number, any random number. It is a pre. They duplicate it once again. Here, I'm going to use 14. Then again, I'm going to use 18. Let's prote this section to save you time. And then I'm going to duplicate this work section again. I create 20 raindrops using span tag. If I set this file, as you can see, nothing is having here. Now we need to style the rain drops in our Sess file. I want to copy the class name in, and in our style file, I'm going to select this class, do. Then inside the calibraces, our first property is position, position relative. Our second property is display, display flex. And our third property is Z index. Z index one. Now we need to style the rain drop. For that, we need to select rain and span tag. For that, we need to select span tag.in, space, span. Then inside the calvass, O first properties position position relative. Our next property is i wit height, ten peak cell. Also weight ten peak cell. Now I'm going to say dground color to our raindrops. Here I'm going to use dground property, background. L et's set the file and see what happened. If I set the file, as you can see, it looked like a state line. But these are all 20 rain drops. Let's have some padding to our rain. Here I'm going to use padding property, padding. First, for top end bottom, I'm going to use zero, and for Leptin right, I'm going to use 20 pixel. If I set this file, you can see the result. Then we need to *** margin between rain drops. For that, we need to use margin property. Margin. For top and bottom, I'm going to use zero F etin w right, I'm going to use two pixel. Now you can see our ran dots are perfectly organized. Now we need to gp the rain dots round shape or that, we need to use border radius property. Here, I'm going to type border radius. Border radius 50%. Let's save the file, and you can see the result. Now it's tend to create the animation. I'm going to use animation property, animation, and our animation name is animate. And our anation duration is five second. Also, the direction is linear. At last, we need to provide anuation iteration count, which is infinite. Because I want to follow our rates infinite time. Now, let's add the frame to this animation. So type at the rate key frames, and our anation is animate. Then inside the aliases. First, at 0% position. I'm going to use transform property, transform, and I want to move these red dots downwards. That's why we need to use translate Y. Translate y. I want to start our red dot animation from 0% position. That's why I pass zero. Similarly, I'm going to duplicate this line and at 70% position, I want to move it downward 300 pixel. That's why I'm going to pass 300. Also at 100% position, I want to use 300 pixel. Let's set the file and see, is it properly or not. As you can see, animation work perfectly, and with translate it property, I want to use scale scale at 0% position, I want to scale it one time. Then at 70% position, I want to scale it one time again. But at 100% position, I want to scale it zo. If I set this file, now you can see the result. As you can see, when our raindrops fall into the ground, it disappeared, not back to the old position again because we use zero scale value at 100% position. That's why it's disappeared when it's fall into the ground. Now we need to change the transform origin position. Here I'm going to use transform origin, and I'm going to use bottom, and then come the most important part of this project. Here you can see the raindrops are falling together. But I don't want to fall raindrops like that. I want the raindrops to fall one by one randomly. And to do that, we need to play with animation duration property. If we change animation duration, then all the rain drops are falling one by one random. If you remember, as you can see in my STL file, we create our span tag with variable and our variation limit is I, and we set a random value to this variable, 161112, et cetera. I'm going to use this random value to create actual ring. Let's back to the CSS file, and here, I'm going to use animation duration property. Animation duration. Also, I'm going to use Kal function, which is a function from CSS, I want to divide 15 second, e or variable I. Here I'm going to type where then inside the round ss, our very name is I, and to cool very well, we need to use da da. Then I. If I set this file, our raindrops are falling randomly. I look very pretty. And now it's look like actual raindrops. Just we need to change the raindrops color, and I'm going to use white color for that. If I set this file, now you can see it worked perfectly. Our project is almost fished. We need to create the ground to create a ground portion in that place, we need to use border bottom property. We need to find the container Here, I'm going to type border bottom. And I'm going to use two pixel border. Also I want solid color for our border, solid, our border color is white, is. If I set this file, you can see the result. Also, I need to remove the rain drops from the bottom. Here I'm going to type bottom ten pixel. I've tested this file, now it's worked perfectly. We successfully complete our cloud and rain project. I hope you like this video. Thanks for watching this video, state tuned for our next project. 34. CSS Loading Animation: Good to see you back guys, once again, I'm back with a new animation project. As you can see in this animation, how the loading animation work. Without wasting your time, let's see how we can create it. How you can see, side by side, I open my visor Studio code editor and my browser using Lx server extension, and I already created STL document name index dot STL. With that, also you create or style Sass file. So first, inside the body tag, I'm going to create H two tag, H two. Inside the S two tag, I'm going to type blod. The n dot. But in my H two tag, I'm going to use data at. Hm type data. Data text. Then equal to inside the double cos, I'm going to pass the same text, loading. Copy the text and paste it inside the double codes. If I set this page, you can see the text in my browser. This is our estable part. Now we need to jump into the or Sess file. At first, I'm going to import a form. Let me show you. Here we see I import popping scorm, and the font it is 700. It is a bold form, and now I'm going to select universal selector. Star instead the Cass or first property is margin. Margin, zero, or second property is padding. Padding also z. O third property is box sizing, Bob sizing, and how I'm going to use border box. And then I'm going to use fond family property. Font family, Fon family, and here I'm going to use Poppins. This font is from Sensory fame. Soto comma, I'm going to type Sensory. If I set this file, you can see the result. Here you can see the font result. You can use any kind of font. It is up to you. Now, let's tyle our body section. He to use body. Body inside the Cs our first property is displayed, and I'm going to use flake. I want to place this text middle of the speech. That's why I'm going to use flake. Then our next property is justify content. Justify contain center. Also, I'm going to align this item. Align item center. If I set this file, you can see the res, and then I'm going to say minimum height. Hm type minimum height, minimum height hundred VH. With that, also, I want to say background. For background, I'm going to use RGV color, RGP. Also you can use any darker color. But here I'm going to use some weight three, green value is 40, and blue value is 53. If I set this file, you can see the. You can use any dirt background color. It is a p, and then next, I'm going to style this H two type. Here, I'm going to tie H two. Then I set the calibraces, I'm going to type position. Position relative, O next property is font size. Font size. 14 V. If I set this file, you can see the result. Now it's look perfect. And now I'm going to set phone color. H I'm going to tie color, and I'm going to use the same RGV color. I copy the value, and I'm going to paste it here. I'm going to set this file. Now you can see it's matched with the background color. That's why you cannot see the color. Our next property is take. For that, again, I'm going to use RGV color. But this time, I'm going to change the, and our value is 2108 and for blue, I'm going to use 146. If I set this file, you still cannot see this stroke because we do not st stroke. That's why I'm going to pass 0.3. V. If I set this file, now you can see the reason. Also, you can increase the stroke. It is a PU, and now we need to replicate the shape using posture select. For that, I'm going to type H two colon colon four. Then inside the calibraces or first properties content. And here I'm going to use Otter function. Now we need to pass this attribute, data text. I copy this attribute here, I'm going to pass data text. If you notice, you can see our data text and our content is similar. That's why it's going to create the same replica. Our next property is position. I want to position it absolute. Then we need to use top top zero. Let also zero. Also, I'm going to say, For now, I'm going to pass 30 pixel. If I set this file, you can say nothing because we do not set any color and height to this element. For that, I'm going to use height property. Height 100%. Also I'm going to use color. Color, here, I'm going to use a hexadecimal vdu, has tag 01f e87. If I set this file, now you can see the result. For now, I'm going to set with zero. It's not going to impact anything. Later I'm going to show you why we need to use with property. Before I do anything, I want this text in uppercase. Here I'm going to use text trasf property. But before I'm going to use semicolon. Then I'm going to type Tex transform. Text trasfm uppercase. And then also to set stroke to this slo. Here, I'm going to use this property and value, and after color, I'm going to past it. But this time, I'm going to change the wheel. Here I'm going to pass zero VH h. Stroke with zero V. If I set this file, you can see the result. If you can notice you can see, there is no stroke on this slo. Our next property is overflow, overflow heated. Set this file, now you can see the result. As you can see, our eight is zero and Olow z. That's why, you cannot see the text. But if I increase the eight value, let me show you 40 pi cell, and then set this file, you can see the result. As you can see slow, it fill the text with the color. Similarly, if I increase the value, 90 pick cell and then set this file, also you can see the result. In the animation, we need to play with this property. For now, I'm going to make the zero, and then set this file. Next, I'm going to use another property, which is border. Border write. Border right, and I'm going to use solid border two pixel, solid. Also, I'm going to use a Hodsimal color. 01f e87. If I set this file, you can see the result. If I increase the width, this time, so here I'm going to pass 120 pixel and the set this file. As you can see, it's look like this line fill the color to this text. Again, I'm going to pass zero here, and now we need to play with the animation. I'm going to create an animation. Animation, and our animation name is animate. I want to run this animation for 6 seconds, and our animation direction is linear. I want to run this animation for infinite time. Here I'm going to use infinite. Now we need to create the key frame. H type at the rate key frames. Keyframes and our animation name is animate. As you can see, I type wrong spelling for animate. That's why I'm going to correct it. And I'm going to type the name animate. Then inside the Calass at 0% position. Again, inside the cases, I moto set w, w zero, and I'm going to topics this section. Now, at 70% position, I'm moto set w hundred percent. If I set this file, you can see the animation. How it's work. It's worked perfectly. If I play with some percents value with 0%, I'm going to pass 10%. Also with 10%, I'm going to pass 100%. At 0% position, 10% position, and 100% position, I want stoke zero. But at 70% position and 90% position of this animation, I want the week 100%. If I set this file, now it's perfectly. How it sw. This is exactly what we want. Thanks for watching this video, stay tuned for our next project.