Css animation : Quick Learn

1. Intro: Hello and welcome. Ian join the shortcut. And I'm thrilled to have you here in this quick and focused course dedicated entirely to CSS animation properties. If you ever wanted to add smooth eye catching animation to your web pages, but felt overwhelmed by long tutorials or JavaScript libraries, this class is for you. In just half an hour, I will work you through everything you need to know to start CSS animation. We will cover the code animation properties like animation name, duration, timing function, iteration count, direction, and move. You will learn how to combine them creatively and bring your web pages to life, all without writing a single line of Javascrit. It is a quick learn class, so we will dive straight into hands on practical examples. By the end of it, you will ready to create smooth animations. So let's get started and make your website move. 2. CSS animation with keyframe: Hello, and welcome to new section of this course where we are going to talk about CSS animation. At that section, we are going to learn about keyframes. The way CSS animation and keyframe works, it is very simple. At first, you need to define a CSS animation rule, and you can name it any name you want. Second, you can add it to any tal element you want to animate it. That's how animation works in our pages. Let's try to understand with practical. At first, inside the body tag here I'm going to create a deep tad, deep, simple deep tag. Then as you can see in my current working directory, I already create a CSS file, style dot CSS, and I'm going to link this style dot CSS file with this tamal document, So type link. Inside the link tag, Amour pass style dot CSS. Then inside the style CSS file, at first, I'm going to select body tag, body and inside the body tag, here I'm going to assign margin. Margin zero from all of the direction here I take margin zero, then we need to style the deve lement. For that, I'm going to slate its stagnme v. Then inside the calves, first, I'm going to assign weed, weed, 150 pixel. Then I'm going to assign height. Height, Hemod assigned height, 150 pixel, it's a square. At last, I'm going to assign a background color, background color, and I want red color. I'm going to set this file up set this file, let's back to the browser. So as you can see, we are in web browser. If I reroute my browser, you can see the result. Here we create a square box. It's sitting right here. Now, let's see how we can apply animation and keyframes on it. So let's d to the result studio code, and let's jump into the style dot CSS file. So first thing we need to do, we need to define a animation rule. For that, we need to type at the rate keyframes, KEY FRA As, this one, and then you need to take a animation name. In our case, moving. Then inside the cli ress then inside the calices here, you need to use Kord like from and two. Here, I'm going to start with from Kord inside the calices, I'm going to use a propriety called transform transform I'm going to use translate value translate. I want to move this element at XX direction. Here I'm going to use translate X. And I'm going to pass zero. Next, I'm going to use two keywords. I'm going to type two and inside the arises, I want to transform it up to 1,000 pixel. I'm going to use transform property, transform. Then inside the transform property I'm going to use translate X, and here I'm going to pass 1,000 pixel. No 100, 1,000. It's move the element 1,000 pixel at Xxs direction. So what basically we done here? We create a animation rule called moving using keyframe. And this animation rule going to move this element from 02000 pixel at X direction. If I set this file and go to the browser and reload this page, nothing going to happen here. There is no movement is happening in this element because we just create the animation rule here, but we did not tell the browser which element going to receive this animation, which element I want to animate. So we need to define the animation to the element, which I want to animate. And as you know, we want to animate the deep element, this element. Then inside this deep element, we need total two property to animate this deep element. First one is animation name type, animation Name, and I'm going to pass this moving. After that, we need to define the second property, which is animation duration. Sumt animation, duration. Here, we need to define how many seconds it takes to complete the animation. Suppose I want to assign three second to complete this animation. I'm going to pass three a. And I'm going to set this file. Now after set this file, if I going jump into the browser, let me show you and reload this page, you can notice it going to move this element from zero position to 1,000 at excess direction. Let me show you. So whenever I reload my browser, you can notice it moved this element at 1,000 pixel. If I reload it again, you can notice it clearly. Then it's back to its own place. Over the period of 3 seconds it complete the animation. I moved the element from zero pixel to thousand pixel. Here, basically we create this animation with two stages. But now we are going to learn how we can animation more than two stages. If you look at the Q words we use from and two keywords. I mean the animation will change the position from the first stage to final stage, and it's happened over this specific duration in our case, three second. Now, what if we have more stages and more changes? We can divide this animation in different stages using the help of percents. What we need to basically do we need to remove the from Keyword. But before I do it, I'm going to comment and I duplicate this section and comment out previous codes. I don't need it. Now at that section, I'm going to replace from with percentage value. I'm going to remove from, and I'm going to type 0%. 0% means the starting point of animation duration, and then I'm going to remove 22 Qard and replace with 100%. It's means the 100% of animation duration. Otherwise, you can say three second. So at the 0% of this animation, we do not move this element, we place it at that position. So the animation will start where the animation originally was. And then at the hundred percent time of this duration, I want to place this animation at that phase. Translate thousand pixel. So it's work as it is, and nothing is changed from our previous steps. If I set this file and back to my browser, let me show you and hero this growser as you can see, it's work as it is. So let's back to the code editor. Steel we use total two stages, but we can use more than that. We can do it using percentage methods because it can give us many choices 0-100%. Now I'm going to add another percentage value. So I'm going to duplicate this line, and here, I'm going to change the value. I'm going to make it 50%. At 50% position, I want to move this element up to 1,000 pixel at excesses direction. But at 100% position, I want to move this element at from the XXs here I move it thousand pixel and from the YXs I want to move it 500 pixel. And I'm going to sit this file. So here I divide this animation in three stage. At 0% of duration, I want to start this animation. Then at 50% of duration, I mean 1.5 second, I want to move this element at 1,000 pixel in excess direction. Then at 100% of time, I mean the three second. After completing three second, I want to move this element at that position. Let's subi file and back to the browser. If I reload my browser, now you can see first, it's going to move this element from this position to this position, and then it's going to move this element from this position to this position within 3 seconds. If I reload my browser, you can notice quickly move the animation. At 0.5 second, it moves this element at that position. Then it's going to move this element at that position, and at last, it's back to its original position. So the beginning and the midpoint animation duration, it moved the elemin from this position to this position, and at the midpoint to end point of the duration, it moved the element from this position to this position. So here we divide this animation into three stage, but we can change the duration percentage value. Suppose at 10% duration, suppose at 10% duration, I want to move this element from this position to this position. It's going to quickly move this element from this position to this position. Then for the remaining distance, going jumping to the ten to 100%, it's going to take 90% of time. Suppose if I say it ten second, ten second duration, and there's this file. Now it's going to complete the animation from first dye to second stage. I want to say from 02, 10%, it's going to take 1 second only. And for the remaining nine second, it's going to move this element from this position to this position. So if I make it three second and set this file and back to my browser. Let me show you. If I reload my browser, now you can see quickly it going to move to the second stage. Then it took longer time to complete this stage. Let me show you. If I reload my browser, you can see it complete quickly, then it completes slowly. So we can control the speed of this animation using percents value at the same duration. Also, it depend on stages. Our first jump is happen much, much faster because it only use 10% of three second. And over the 90% of three second, it's going to complete the animation, the second stage animation. That's why it takes time. So this is it for this tutorial. At the next part of this tutorial, we are going to learn animation field mode. So thanks on watching this video sty tuned for our next tutorial. 3. Animation iteration count : Hello, guys, good to see you back. Once again, I'm back with a new tutorial related CSS animation, and in this tutorial, we are going to learn a new property about animation, which is iteration count. Using animation iteration count property, we can tell our browser how many time we want to repeat the animation, and this property exit values as in number. If I pass two, then it's going to repeat the animation total two time. Then if I pass three, it's going to repeat the animation three time. We are in my CSS file. At first, I'm going to comment out animation delay property. And then I'm going to use the property call animation iteration count, this one. And I'm going to repeat this animation total three time. Also, I'm going to reduce the animation duration. I'm going to make it three second. So after I set this file, if I back to my browser and then reload this page, now you can notice it going to run this animation total three time. So on this code, as you can see, it runs this animation total three time because we define iteration count three time. If you want to run this animation infinite time, yes, you can. Let me show you how. Just you need to use property infinite and we need to set this file. After set this file, if I back to my browser and then reload this browser, now you can notice. Now you can notice it going to run this animation infinite time. It not going to stop the animation. It not going to stop this animation. Now let's back to the code editor. There's the usage of this property. For now, I'm going to make it three and I'm going to set this file and I'm going to reroute my browser. Otherwise, it's going to run this animation forever. After run the animation three times it's going to stop executing the animation. Now, let's back to the code editor again. Let's talk about another property, which is animation timing function. It is pretty similar to transition timing function property, and also it except the same values, which is linear in is out and is in out. Now, let's apply it. So I'm going to make the iteration count one, and here, I'm going to apply animation timing function. Animation, timing function, and I'm going to use is property. I. And what is does it make the animation movements start slow, then it go faster and end it slow. And before I run it, let's increase the duration to understand it properly. So I'm going to make it five second again and I'm going to set this file. And if I jump into my browser and reload this file, now you can see it starts slow, then it's go fast. After that, again, it ends slowly. We already learn about it in our previous tutorial, and let's try another vedo. So here on T is out. And I want to set this file, which start fast and slow down at the end. After set this file, if I back to my browser and then reload my browser, as you can see, it start fast and then slow at the end. Then we have es in. It starts slow and faster at the end. Let me show you. So HerodizeEs in. Es in this one. And after set this file, if I back to my browser and then reload this browser, as you can see, it starts slow and fast at the end. I'm not going to extend all of this because we already learn about it. This is the example of animation timing function with different values. Linears, easing out, and is out. I hope you are already familiar with that. Thanks for watching this video, stay tuned for our next tutorial. 4. Css animation fill mode: Hello learners. Welcome back. This is another tutorial related animation. And in this tutorial, we are going to learn animation, fiel mode. In our last tutorial, we move this deep element at 1,000 pixel at XX direction. Then we move this element at YXs direction 500 pixel, something like that. But after the end of this animation, this deep element back to its original place. But now I want to stay this final position of this animation at that place. Yes, we can do it using animation film mode property, which basically tell the browser what to do with this element outside the animation window. I want to say before the animation start and animation end. And here we are going to dealing with the second case after the animation end. And we have to tell two choice. First one is, it could be back to its own place. Otherwise, the element will stay its final position, and we are going to do that using animation field property. So let's back to the vis studio code editor. And I'm going jumping to the CSS find style dot CSS. Then inside this Gib selector, I'm going to type animation fill mode, this one, here we have to tell four value. Our first value is none. If I use this value and set this file, then it is nothing going to change anything. Let me show you. After I set this file, if I back to my browser and load my browser, now you can see there is no changes. It's work as it is, and it is back to its own place. But if I use the second value, which is four words. So type four words and then set this file. Forward applies the last stage of animation. This position, I going to stick this element at that place. So after set this file, if I back to my browser, let me show you, then if I reload this page, now you can notice here you can see these elements stay in that place, the last position of the animation. This element not return to its own place, and it looks little realistic also. Also, we have another property, which is backwards. To explain it, let's back to the user's studio code. But before I use it, I'm going to use animation delay property. Animation delay, this one. I'm going to delay this animation and Hemed at three second delay threes, and I'm going to sub thisfy so before we start the animation, it go to wait for three second. If I set this file and back to my browser, now you can notice after reload my browser, it's going to wait for three second. After three second it's going to run the animation and these animation stick to at that place. This element stick to at that place. Now, let's get to the visual studio code. What if this animation start from the 500 pixel, not from the original place. Instead of zero position, I want to assign 500 pixel from the Xxs. And also, I'm going to change the trend person value. I'm going to make it 50%. I'm going to set this one. Here I need a little longer time for horizontal movement. That's why I increase the passages value. Also, I'm going to increase the transition duration. So hemset animation duration, five second. That we can see what is happening geedly. So set this file if I back to my browser, let me show you. If I reload this page, then you can see it going to place this element at that position. After three second waiting, it's going to start the animation from the 500 pixel from this position, let me show you. After reload my browser, as you can see, it going to wait for three second. Then after three second, it's going to start this animation from this place. Then after that, within 5 seconds it complete the animation here I use animation film mode forwards. That's why it stay in this phase. But you not might expected this. You think it's going to start this element from the 500 pixel. That makes sense because we set the starting point of this animation at 500 pixel, but we can do it using film mode. If we say animation film mode backwards, then we can start this animation from this position, not from the original place. Let me show you how. So let's back to the re studio code, and here we say, if I say it without using forward backward, this one, this value, then set this file and back to my browser. And reload my browser, now you can notice it going to start this element from this place. After three second wait, it's going to start the animation and it's going to complete the animation within 5 seconds. And then to complete the animation, this element back to its original place at that position. Now we can fix this problem. We can stick this element at that position also. If we use the booth propity then it's going to fix this animation at the last stage. Let me show you. Here, instead of using backward, if I use both and then set this file and back to my browser and reload my browser, now you can see it starts from this place. Also after complete the animation, this element stay at that position. It's not back to the original place. So this is what we can do with animation film propriety. Animation film mode propriety tell us from where I want to start the animation and where I should end up. This is it for this studio. Thanks for watching this video. Stay tuned for our next studio. 5. Animation Direction property : Hello, everyone. Welcome to new lesson about this course. Here we are going to talk about a new animation property, which is animation direction. Using this animation property, we can specify the direction of this animation and the property except total four value. The first value is normal, which is the default value, it tells the browser to start the animation from the beginning right here and it's going to end it right here. It is the default value. Let's apply the property. At first, I'm going to comment out this line and here I'm going to tie animation direction. Animation iteration and the first low I'm going to use normal. Before I set this file, I'm going to increase the animation iteration count value, I'm going to make it three. I'm going to set this file. Then after set this file, if I back to my browser, let me show you and reload my browser, now you can see it going to run the animation as it is. From this position, it's going to start the animation, and from that position, it's going to end the animation and it's going to run the animation total three time because we use iteration count three. This is the normal value. Now let's talk about the second value which is reversed. Here I'm going to use instead of using normal, I'm going to type reverse and I'm going to set this file. After set this file, if I run this animation, this time it's going to start the animation from the reverse position. It's going to start the animation at that point, at that position, and it's going to end the animation at 0%. Let me show you. Preset this file. If I back to my browser and reload this browser, now you can notice it's going to start the animation from this point and it move the element opposite direction. So you can see it moved the element opposite direction and it start the animation from this position, and it's going to run the animation total three time because we use iteration count three. So this is how it's worked. Now, let's talk about the third value, which is alternate and what alternate does. First, it's going to run the animation from the beginning to the end. Then it's going to run the animation from the end to beginning again. And if we use infinite, then it's going to do the same thing again and again. So here, I'm going to type alternate. And this time, I'm going to use iteration count total three. So set this file. If I back to my browser and reload my browser, now you can notice it's going to run this animation from this point to this point, then it going back to the previous position at opposite direction. Now, after I complete it, again, it back to the position, and it's going to stop the animation because we use iteration count three, complete the three count, it's going to stop the animation. But if I use infinite, let me show you so this time I'm going to use it doesn't count infinite. And also I'm going to reduce the animation duration. I'm going to make it two second, and I'm going to set this file. After stud this file, if I back to my browser and rewrote this page, here you can see the result. This is how it's going to work and it's going to work continuously. At first, it going start from the beginning and jump into the end position. Then again, it back to the end to beginning and it's going to do the same thing multiple times. Here it creates a beautiful UU effect. We are going to learn about UU effet when we learn about SAP. Now let's look to the users studio code. At last we have another value which is alternate reverse. If we use alternate value, it's going to start the animation from the zero position from the beginning. But if we use alternate reverse, it's going to run the animation from the end position. Then it's going to run the animation opposite direction from the hundred percent. If I type alternate reverse and then set this file and back to my browser, let me show you then if I revert my browser, now you can notice it's going to start this animation from the end position. And it's going to do the same thing what alternate does, but it start the animation from the imposition. So that's the main difference between all of these vues. Now, let's talk about the main animation property. So let's get to the visa studio code. Now I'm going to tell you how can you use one liner animation property? You can notice to run the animation, here we use multiple properties such as animation name, animation duration, animation film mode, animation delay, animation, iteration count, animation timing function, and animation direction. We can use all of it in a single property. For that, we can use animation property. So I'm going to comment out all the lines. Then I'm going to use the property called animation. We're going to combine all the property into one single property type animation. Just simple animation. At first, we need to provide the keyframe, the animation name, which is moving. I'm going to copy the animation name and I'm going to paste it here. Then we need to provide a space, and after that, we need to provide the animation duration. So to use three second. Then after that, we can use all the properties side by side. Suppose if I pass animation film mode, we can tie both. Then upper space. Water is not mandatory for that. Just one thing remember, first, you need to pass the animation in, then you need to pass the duration. Afra that, der is not mandatory. Sure pass both. If you want to provide delay, so I'm going to provide once again delay. Then upper space, I'm going to pass animation iteration count infinite. After that, I want to play the animation in alternate. And if you want to use animation timing, yes, you can. So to passes in. Otherwise, es you. I'm going to set this file. Here I use all the values one after another. Just you need to follow the first two values. Was at first when to pass the animation name, then you need to provide the duration. After that, you can pass any values, and you don't need to follow any water for that. So if I set this file and if I back to my browser and if I reload this browser, you can see the result. After 1 second delay, it start the animation. So it's going to run the animation alternately, and it successfully run the animation. So this is how we can use animation propriety. This is for single liner. I hope now it's clear for you how we can use CSS animation with keyframe. So thanks for watching this video, stay tuned for the next tutorial. From the next tutorial, we are going to start the projects relitate keyframe animation keyframe. 6. Driving car animation : Hello, everyone. In this lesson, we are going to create this beautiful nice infinite animation. As you can see, we have a car and a motorbike riding on this rode. The idea behind in this example is very simple. We have a background image which is this rode we have to two images, one for the car and another for the motorbike, and the car and the motorbike images is not moving. We move the background from left side to right side and it gives us this beautiful driving effect. Let's see how we can build this animation. So as you can see, finally, I am in my Visual Studio coordinator, and I already created an TML document index dot HTML. With that, I already create this style dot CSS file. And as you can see in my current working directory, we have multiple images. We have image of background image. This is our main background image, and I join this background image multiple time and create a new background image. And here I join this background image multiple time and extend the width of this image. So we can run our vehicles at that road. Let's jump into another image, which is car image. I'm going to use this car PNG image. Also, I have another vehicle which is this motorbike. I'm going to add the motorbike and car image on this road and we are going to move the background image only. Let's back to the index dot file. At first, inside my body tag, I'm going to create a deep tag, weave that, and I'm going to assign a class background. The inside this dip tag, I'm going to take two image IMG image. As a source, I'm going to pass cimag card, and also I'm going to assign a class and our class Name is card. Then I duplicate this line and here I'm going to add the motorbike image, motorbike. And it's a motorbike. Then I'm going to set this file. After I set this file, if I show you my browser, and I already open my browser using my live server. So if I show you my browser, this is how it look like. Now, in our background element, we need to add the background image. Let's back to the users to your code, and I'm going to jump into the style dot CSS file, and I'm going to start our styling. At first, I'm going to select the body tag body. Inside the Cariss the first probity, I'm going to use Margin, Margin zero. The second probit, I'm going to use pairing. Padding also zero. I'm going to set this file. After that, I'm going to work on the background. I'm going to work on the background deep element, so I'm going to copy its class name, background and back to the styler CSS file. I'm going to select this background deep using its class name. Then I'm going to assign height, height, and I'm going to assign 100 viewport height. Then I'm going to assign background, background, and I'm going to use URL. URL and inside it, I'm pass the background image. Which background image this background image? This long background image. Ham type background three BG three to JPG. Then we need to position this background. Background position, and I want to position it from the bottom, bottom lit. I'm going to set this file. After I set this file, let's get to the browser. This is how our background look like. Now we need to place this motorbike and the car right position. For that, we need to style the car. At first, I'm going to style the cart car. I'm going to use its class name. Then inside the calibre says, first, I'm going to define the position. Position, I'm going to make it absolute. Then I'm going to define from the late, I want to place it 300 pixel. From the bottom, I want to place it 250 pixel. And also, I'm going to define width of this car Width. Here I'm going to define width of this car image, and I'm going to say 500 pixel. At the same way, I'm going to position the motorbike. For that, I'm going to use its class name. I copy the class name and add to the style CSS file, and I'm going to select the motorbike image. Then inside the calibrssF want to define the position position, which is absolute position. Here we use absolute position because we are not going to move a car and motorbike image. That's why we use absolute position and from the left and from the left, I want to place it 1,100 pixel and from the bottom, I want to place it 360 pixel. Also, I'm going to define the width of this image. Width, I'm going to make it 250 pixel. I'm going to set this file. After set this file, if I back to my browser, this is how it looked like. I think I need to adjust this car image a little bit. Let's back to the code again and from the bottom, I'm going to make it 250, not 150. I'm going to set this file. After I set this file, if I back to my browser again, this is how it look like. Now, we place our car and the motorbike at right position. Now we need to run the animation. We need to run the bottom lap to bottom right. I want to say we need to move this background from bottom lap to bottom right position, and it's going to give us this beautiful animation effect. Let me show you how. So as you can see, here we define the background position, bottom lift. In our animation, we need to move it bottom right. Let's define a keyframe. So t at the red keyframes and our keyframe name is driving driving and inside the Clss I'm going to use from keyword. Inside the cl recess, I want to change the background position only. Background position, and we are going to start from the initial position, so I'm going to use the same value, bottom left. Copy this value and I'm going to paste it here. And then I duplicate this line, and I want to move up to, so I'm going to use two Qard, and this time, I want to move up to bottom right corner. Bottom right. I'm going to sub this pile. After set this file, we need to call this animation in our selection. In our background, I want to run this animation. I'm going to use the animation property animation and our animation name is driving. Then we need to provide the animation duration which is ten second. Then we need to provide the animation direction, which is linear. And also we need to provide the animation time. How many time we want to run this animation and I want to run this animation for infinite time, so I'm going to use infinite. I'm going to set this file. After set this file, if I back to my browser, as you can see, it run my animation. This is how we can run any driving animation. We need to just move the background, and we don't need to move our objects such as car, otherwise motorbike. Just need to move the background from another side to another side. Here we just move this background to left side to right side and it gives us this beautiful driving effect. So I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next project. 7. Rotationg loading effect using css animation : Hello, everyone. Once again, I'm back with a new project related CSS animation. Today in this project, we are going to build this beautiful loading animation using rotate X and rotate Y value in three D environment. Let's see how we can build this animation. As you can see, first, it rotate the animation at YXS 180 degree, then it's going to rotate the animation XXS and YXS 180 degree. Let's see how we can build. As you can see side by side, I open my Visual Studio code editor and my browser using Live Server extension and I already create an TML document named indexOtETML. With that, I already create styled CSS file and I link the style CSS file with this document. At first, inside the body tag, I'm going to take a deep tag, beef and I'm going to assign a class and our class name is Lodi. Then I will jump into the style CSS file and first, I'm going to style the body section. Body, then inside the CalibrasF I'm going to assign height. Height, I'm going to assign 100 viewport for height and then I'm going to use the property, this way flex. This flex, then I'm going to use property called justify content, Justify content center because I want to place the alignment center of this page. Then I'm going to use align align items center. After that, I'm going to use background color, background color. I want to use dark gray background. So I use this color code, has track 222, and I'm going to set this file set this file, this is how it looked like. Now let's target the element using its class name. So type dot loading. Loading inside the Calibra says, here, I'm going to use the property, the property called Wi Wi 100 pixel. Then I'm going to use height property, height also 100 pixel and background color, background color, and I'm going to use Daground color white. After that, I'm going to assign little border radius. Border radius, I want 12 pixel border radius from each of the corner. Now to s this file, you can see the result. QullPixel border radius provide beautiful nice rounded boder. Now, let's work on the animation keyframe. It at the rate keyframes. And our animation name is, for example, loading. Then inside this keyframe, I'm going to add the first stage 0% at 0% position at 0% of time, inside the cool resis. Here I'm going to use transform property, transform and transform rotate X zero DG. Then come rotate Y, rotate, Y. Also, I'm going to pass zero DG. It's going to start the animation from its original position. Then I'm going to jump into the second stage of animation, so I duplicate this line and at 50% of time, I want to rotate this animation at Xs is zero degree but I want to rotate this animation, YXs 180 degree 18 DG. At the 50% of animation duration, it's going to rotate this element at YXs 180 degree. Then at final stage at 100% of animation, let me show you at 100% of duration, I want to rotate this element at XX is 180 degree. Also, I want to rotate the same element at YX is 180 degree. I'm going to set this file. Then I'm going to call this animation in my selection. I'm going to type animation. First, I'm going to provide the animation name which is loading. Then I'm going to provide the animation duration, which is to second to a. Next, we need to provide the animation timing function which is linear. Finally, we need to pass animation iteration count. I want to run this animation for infinite time. I'm going to pass infinite. As you can notice, here we work with rotate x value and rotate Y value, this two function and it's work on three environment. That's why we need to use perspective on it to understand it better. I'm going to jump into the body section and here I'm going to add perspective. Perspective perspective, and I'm going to say prospective 200 pixel. Now after set this file and reload my browser, this is how our animation look like. This is how it rotate the element. First, it's going to rotate the element at YXS 180 degree, then it's going to rotate the element, XX is 180 degree, also YXS 180 degree. That's why it creates this beautiful loading effect. I hope now it's clear for you how we can build it. Thanks for watching this video. Stay tuned for our next project. 8. Animated button with css animation: Hello, everyone. In this tutorial, we are going to create this leak, this animated leak. Now, if you take a look, we have a red background and it have specific wide and we skew this element a little wit. Also it moving left to right side continuously. Infinite time, it's going to run the animation. But whenever if I hover my cursor on this element, let me show you if I hover my cursor on this element, now you can see it stop the animation. Also, the button filled with this red background. I extend the width of this skew element and cover the whole button. This is what we are going to create in this project. I hope you will enjoy. It's a very simple and easy project. It's not a very difficult one. So let's jump into user studio code editor. So as you can see side by side, I open my Visual Studio code editor and my browser using if server extension, and I already create an HTML document named index dot TML. With that, I create Stylo CSS file. For now, it's an empty. Now inside the body tag here, I'm going to take a anchor tag, A, and here, I'm going to type Hover me. Dash it up to set this file, here you can see the link in my browser. But we need to style this link. For that, we need to go jump into this style dot CSS file. At first, I'm going to start styling with body tag, some type body. There inside the Cli vers is the first property I'm going to use height. I'm going to define a height, and for height, I'm going to tie 100 VH, put height. Then I'm going to define display and I'm going to make it flax. Display flakes and justify content center align item, align items also centered. Whatever element we pass inside this body tag, it going to vertically and horizontally center this element. After that, also I'm going to pass a background color background color here I'm going to use dray background color. So type has tag 222, and I'm going to set this file. After I set this file, you will see the result. As I told you, horizontally and vertically, it going to center the element of this page in this page. Next, I'm going to starle the anchor tag. So type A, then inside the clirassF I'm going to remove the underline from this text, some type text, decoration. I'm going to make it nun. I'm going to set this file, you can see it remove the underline. After that, I'm going to make it visible some time, color. I'm going to make it white. Also, hair, I'm going to define font size, font size, and I'm going to make it 40 pixel, I think 40 pixel is enough for the example. Next, I'm going to define the font family, font family. Here I'm going to use sensory. After that, I'm going to define border, border. I want three pixel, solid border, solid, and our border color is also white. Then I'm going to set this file. After set this file, this is how our button look like. After that, we need to add some padding on it. So that padding so from top and bottom, I'm going to pass 40 pixel and from left and right, I'm going to pass 80 pixel. Then I'm going to make position. Position, I'm going to make it relative. After that, I'm going to define overflow. Overflow hidden. I'm going to set this file. After I set this file, this is how our button look like. Next, I'm going to create the inner element using before pseudo class. Here, I'm going to create a before pseudo class of anchor tag A, colon before. Then inside the aliases, the first property, I'm going to use content because to create a blank content for that. Content, content is a blank content. Then after that, we need to define position of this blank content. So from the top, from the top position, I'm going to make it zero. From the lab also I'm going to start bed also zero. After that, I'm going to define a background color, background color. I'm going to use reddish color someti HatagF four, four, three, three, six. After that, I'm going to define id. Width, helm to use width, 120 pixel. Next, I'm going to define height, height, and hem to use height, 100%, 100%. After that, I'm going to define the position position, and I want to make it absolute. And I'm going to set this file. After set this file, this is how our element look like. But the problem is letters under it. So for that, we need to use Z index value. So here are T Z index, and I'm going to pass minus one. I'm going to set this file and resolve the problem. Now I'm going to transform this element. I want to skew this element. For that, we need to use transform property, transform, and I'm going to use skew value, skew. And I want to skew it up to -15 degree the EG, and I mo to set this file. After set this file, this is how our element will look like. Also, you can notice this element is not visible outside the border area because here we use overflow hidden propriety. That's why we cannot see this part of area of this que element. Now we need to work on the animation that going to move this element lap to right side. But before I start the animation, I'm going to comment out this line overflow hidden and here, I'm going to declare the animation using the red keyframe and our animation name is, you can name it anything, I'm going to name it move. Then inside the Caira says at here, I'm going to use from keyword, from this is the starting position of this animation. Then inside the caliber says, here, I'm going to use the property called P. From the lap, I want to start the animation at minus 120 pixel. Sorry, 120 not 12. Then I'm going to set this file. I mean, it's going to put this element at that place. Let me show you. If I change the value, if I change left value, if I make it minus 120 pixel and then set this file. As you can see, we move this element at that position. Now, in our animation, we are going to start this element from that position. For now, I'm going to make it zero, zero again because this is the starting position of this element. But in animation, we are going to start this element at that position. And in two keyword two, our end destination is left value f here, I'm going to pass 100%. I'm going to set this file. Also, now, I'm going to uncomment this line again. I'm going to set this file again. After that, I'm going to call this animation in our BfcedElimate. Tip animation, first we need to provide the animation name which is move, then we need to provide the animation duration, and I'm going to use 1.2 second. And our animation derion is linear, for animation intercon count here I'm going to use infinite value, infinite. I'm going to set this file. After set this file, as you can see, infinite time for infinite time, it moved this element behind this bottom. For infinite time, it's going to run the animation, but I want to stop this animation when I Her my cursor on this button. Also, I want to extend the width of this skew element. For that, we need to create a hover selector of this before element. Here, I'm going to type NCatag colon hover, and I'm going to apply the Her selector in before element before. Then inside the calibrsF property, I'm going to use wed. I want to extend the width of this element, and I want to make it 100%. Then I'm going to remove the QVLu. I want to make it a square. I will type transform, and I want to make it Qvalu zero DG and also I'm going to remove the animation when I hober my cursor on this element. So type animation, and here I'm going to pass Nn Value. I'm going to set this file after set this file, if I hober my cursor on this button, as you can see, instantly it stop this animation. Also it fill the button with this before pseudo element. But the problem is we cannot experience the transition on it. It instantly covered the whole button. For that, here we need to use a property called transition. Transition all of this element, and our transition time is 0.5 second. Win hub second, it's going to covert this element. Let me show you. Whenever I hover my cor on this button, you can experience this animation. You can experience this transition. This is how we can create this beautiful animation effect on this button with the help of keyframes and before pseudo lemate. So thanks for watching this video schedule for our next project.