CSS Animations With Creative Real-World Projects

1. Intro: Hi there. If you ever dream about using your creativity to build amazing web applications, but you haven't known how to animate your components in the CSS code. Here's the chance to learn it and improve your skills. In this course, you're going to be learning how to create text animations, incredible buttons, 3d components, and animated elements by using your imagination. Nowadays, being able to build a website is not a sufficient way to land any job or create your web application. Even people who are not related to coding can create an ordinary webpage with $10 template or a page-maker tool. To call somebody's attention, you should build more creative and fancier webpages. And using CSS animations is the best way to do it. We are going to begin with the basics of CSS. After that, you are going to be learning positioning, pseudo classes, and pseudo elements than I will teach you the animation basics. You are going to learn what the translation is, how to move elements, how to translate them, rotate them, scale them. After that, we will handle how to use keyframes, how to animate components with all well-detailed CSS effects. And the most important feature of this course is that it includes real-world projects. You will not learn only basic and no sense transform effects. You will learn really useful projects that you can include your web application or portfolio directly. And I believe that these all awesome projects will be an inspiration for your future projects. So, you will not improve your skills only, you will improve your imagination also. And by the way, you do not need to know JavaScript or advanced CSS. Don't worry, if you know the basics of HTML and CSS, it's completely enough. After the course, you will be able to understand how these all amazing animations work and be able to create your own projects without any help. So I hope I will see you in the first lesson to start a new journey together and learn a lot of cool things. Let's do it. 2. CSS Basics: Hi there. In this section, we are going to tackle some important CSS points. I'm sure some of you already know about flexbox has, have to align elements both vertically and horizontally, and how to use the advantages of the flexbox. But if you're already at the know, don't skip this section. We will also cover CSS, pseudo elements, and classes. It's really important to understand pseudo elements and classes before getting started with animations, especially before and after elements. So if you're ready, let's deep dive into it. 3. CSS Flexbox: There are many, many ways to align items in CSS, but when you have complex webpages is hard to, to organize them without using any container. So you can use grep display, flex boxes or other methods. I want to talk about flexbox has a little bit because the entire course we will work with flexbox. And I don't want to put a question mark in the minds. And don't worry, it will be not so long. We are going to cover only half to align items, not all features of flexbox. If you're ready, let's get stone. Before starting, you can install any code editor. If you don't have one. Of course you can use any of them, but I highly recommend you to work with. We ask God, It's free. It has tons of handled plugins and everyone uses it. It's the most popular collector nowadays. So firstly, I want you to install these two l some extensions. The first one is the live server. It allows us to show our application on the browser immediately. You don't have to refresh the page with every single changes. Then you save the file. It will appear on the browser. And the second one is the premier crop. It formats your HTML, CSS, and Javascript codes and make them tidy and nice. So after this, I will create an HTML file and a CSS file. And I will link my CSS to the index file. Let's write here Heller and check with the lifesaver explanation whether it works or not. Nice. I will give you the background colored body. Let's see how awesome. I will create three different tiers that have different sizes. But before, let's wrap them with a container div. Let's kill this container. Color, background color, a 100%. As you can see, there is a frame here. To prevent this. Take this holder command and say margin 0. Have some. So I'm creating item one, item two, and item three. Let's change item 100 pixel and hide and that pixel and background color. Okay? An item to, let's say 50 pixels by 50 pixels, background color. And item 350 pixels and background color. Gray. As you can see, one under the other. One I want is make them in the same row. I'm giving the container display property and flex value. Now they are side-by-side. So how can I centered up? I will write here a line items center. Now they're centered. What can I do as I can align item on the top are flags and that's take them back and try to center of the container. For doing this, I will write justify content, property and center and see how easy they are centered perfectly. What can I do more with this property? I can give space between and it goes next to the left and right space around. And it gives a little bit. Here is placing only, and it gives it one space. But now I want to display them vertically. So it's so easy to do that. Flex direction column. As you can see, it's vertical right now. I can go again space. Let's take them back. And I want to show you one more thing. Let's make our items are a little bit Baker. Okay, let's see. When I make the screen smaller groups. As you see when I shrink the browser, I want these items to move next line. So I can write here flex, rap, and rap. And right now 30 is growing. Button and shapes are same. And we can see right now second element goes but more-so perfect. And that's all. And don't forget, display properties are really huge part of CSS. We don't need to deep dive into them as it's not and HTML and CSS course. But knowing all these are perfectly enough to follow the entire course. And let's go to the next lesson and talk about positioning. 4. Absolute Positioning: And you wrote with animated items, absolute positioning is really useful. If you don't understand the absolute relative relationship, you may make crucial mistakes and your work may be shown differently on different screen sizes. So let's try to understand how absolute positioning works. So I will delete them first. I will live only dissenters container. And then here I will live on one item and I will say item, and I'm gonna add this H1 tag. Hello. Unless changed his Item, 200 pixels, 200 pixels. And background-color. Steel ball. As you can see, our text next to the top and the left. I want to move this text 50 pixels from top, 50 pixels from the left. Of course, we can do this with merging or paddings, but we are trying to handle positioning. When I do that, nothing changes. But if I say position relative, as you can see, I can move it. Now. I want to use absolute position. Now, it goes 50 pixels from top and left all the whole screen. So it's parent is container. But why it goes here? That because the container has studied position by default. So if I change pampered relative, we'll work as we want. So if I add here another container, let's say container, item and take this insight. And 200 pixels and 200 pixels. And of course it's not container to its container item. So I will change here bottom instead of top. So you can see better. As you can see, it's not in the container item because it's not relative. So I have to say the parent is position relative. And right now it's in the correct position. So do not forget, if you use absolute, your parents should be relative. Otherwise, it will move according to first relative grandparent. There are other different positions, such as fixit are sticky, but they are not our concern right now. So if everything is okay for you so far, we can talk about pseudo-classes. 5. Pseudo-Classes: Pseudo-class is used to define a special state of an element. What I mean by that, after creating the element, we can decide different actions for every stage of the element. For example, for any element, it can be a mouseover. We can change the properties of the element while hovering the mouse cursor. Or we can change a button when it's disabled. Horror for input. We can change its properties after clicking. Let's clear here, we will use the container. Let's delete them also. And I am creating a H1 tag. And I will add button, class button. And I'm going to add an input, class input. And I'm going to use a placeholder. It's a username. I'm gonna use flexbox radically. So I'm going to say to action column. Let's do this pace humanly. Let's add here one more thing. I'm going to add a list. List item. Let's say apple, orange, and watermelon. Cool. And what I want is defined the hole. And when I hover to text, the color will be changed. Let's see. And it's our first pseudo-class. I want to use disable pseudo-class. For doing this, I shall disabled to button. So as you can see, it appears like that by default. So I can change it. I will say button disabled. I can change background color, or I can change the cursor, I will say not allowed. And now, when I hover over the button, the cursor is changing. And for input, I can use focus pseudo-class. It works when you click the input like this and there is a hoarder and outlined by default. You can change this powder, num and outline none. And now there is no outline. I can add here padding. And now when I click, it adds padding. And right now I want to change list items. We have three items here. And I want to select first one, and I can say first-child color. And for selecting plus one, I will say last child. And color, yellow. There is first and last one. So how I'm going to change the second one? So I will say this item and, and child because its second element and color violet. Let's change this, right? Cool. And now you understand the logic of pseudo classes and we will use them are animations. So that's all I will see you in the next lesson. 6. Pseudo-Elements: Pseudo elements are used to style specified part of an element. For example, styling letters of the text or inserting content before or after to the main content soil, Let's talk about before and after pseudo elements. For Firstly, I will add here a container and H1 tag, class text. Hello, my friends. Let's change the text color, white. And right now I'm going to use pseudo elements text before Content. I'm gonna add a new content here, let say add before. So as you can see, it adds a new content before to make content, I can change any property here, let's say color. And I will do the same thing for after. Let's say at, after. And right now it adds new content after the main content. Let's make this a little bit bigger. Let us write here second texts. Texts T2. I will comment out this text to color white. And I'm gonna add before. And I will say tax again, exactly the same text color occur. And if I say here, position absolute, it will be at the same place. Let's make this a little bit bigger. Maybe more. I'm going to say left minus ten pixels. It moves according the body, because we didn't say position relative for parent. And don't forget before and after. Pseudo elements are children of two main element. And right now, it goes according to main text, I will say left minus a 100%. And it goes next to the main text. And I'm reducing here slightly minus 908070. If I say here, overflow of hidden, there will be no overflow anymore. Let's say 605040 and so on. As you see, I'm showing cue to premature animation. I'm doing this manual right now. I showed this to you to make understand the basics of animation. And for 0, we complete appear animation. And after that, we will do this with transitions and animations to make sure there is no question mark in your mind. We can jump into the new lesson. 7. CSS Transitions: Transition is the baseline of the animation. We transition property. We can arrange our animation type, style, duration and delay. Let us try to understand on animating mating approach. As you can see, we have a div here. And I held two actions. One is the hover and second is the active, which means collecting action. When I hover, it grows longer and when I click its height graphs, let's make them a little bit fancy. I'm going to write here transition property. Let's copy this and paste Transition Duration, play and timing function. So I'm choosing my property writ. Duration is two seconds, delay is 0, and timing function is linear. And when I homeward is, it goes in two seconds. When I click, it's still same, but because we didn't change height, I can say here comma height and run. And for height is same right now. And I can say here all and all transitions will be the same. Let's change this duration. I would say 1 second. And I can do this faster. If I don't write 0, it's still the same thing. Let's do this again two seconds. And I want to add clay. And it starts after 1 second delay. Let's do this again. And the coolest part, timing function, then we rightly narrow here, the animation goes with fixed speed. It will not speed up or slow down. Let's try ies. And now it starts and ends slower. If I change the easing, it will start slowly. And Dan gains Pete after he's out. It'll start faster and then slow down a little bit. Is in, out is similar to ease, starts and ends slower. And I can write steps and indicate here how many steps do I want? And it's stepped. And now I want to show you a really cool thing. He'll go to cubic Beziers.com. And here I can create my function manually. Let's do this layer and make this two seconds. And I'm starting play here. And right now, it's getting slower in the middle. And then it's going faster again. I could copy this and paste here. And C is the same function. Half cool, isn't it? And you can go to this website and play more and create your own functions. I'm coming here again. And instead of writing all these properties, I can do this in one line. I will say all two seconds duration 0 second delay, or I don't have to write this. And my timing function, it's exactly the same think. Oops. Transition of course. See icon right here with, and it will work for only VDD. And I can use for height, and I can use another transition, 1 second and linear. It's 1 second right now. So you can write your transitions in one line. If you understand everything, you are ready to start creating l some translations. Let's jump into the next section and see what you are going to be learning. 8. Transform: Hello and welcome to the second section. Before getting started with the real world projects, I want to explain one of the most important property of the CSS animation transform. Transform allows us to shape our HTML elements. We can move them, rotate them, give them any 3D prints and more. And we will also cover the past peak to property that we will use in the future projects. After that, you will be able to understand the logic of the 3D shapes. If you are ready. Let's get started. 9. Transform Types: I will create here a container. And inside container it will be item deal. As you can see, we have container here already, flexbox centered. And I will change our item and background cold. And I will write here transition, it will be all 1 second and is, let's try it here. Hover pseudo-class. And our first transform property value will be translate X. I will say 50 pixels. And when I heard this, it goes through right? Translate X moves our item on the X axis as the same way, translate y moves our item on the y axis. There is a translate Z and translate 3D. But we will do this in the next class because we don't know perspective yet. And I can write here x and y at the same time. Let's comment this out. And second value will be a rotate. I will say rotate x 50 degree, and it rotates on the X axis. I can say rotate z and it rotates through Z axis. If I don't write anything, it will move like Rotate, see an icon right, rotate y, and it goes through y-axis. Let's comment this out also. And third one will be scale. It makes our item bigger or smaller. I can make the small. And the next one skew. If I write here CQ x 50 degree, it will be skewed. I can write here skew why? And it skews vertically. If I don't write x or y, I can indicate might decrease here, x and y. It will be skew, of course. Item is enough for right now. And don't worry, we will use all of these in our project and you will be able to understand how they work. So if you're a cave so far, you can go to next lesson. I'll see you later. 10. Perspective: Let's talk about perspective. Then we look at the screen. We see only two dimensions on the x and y-axis. So when I write here translates set and a 100 pixel and I'm hovering. And nothing changes that because we don't have any perspective. And we can see the third dimension. If I got a parent div and save perspective, let's say 500 pixels. Right now, I can see that my item moves to set axis. What about this 500 pixels? This value right here indicates how far we are from this container. If I write here 300 pixels, it means I'm closer. If I say a 100 pixels, the item covers the whole screen. That because it moves around the pixels to set axis. Let me make this clear. So we have do here. You're looking, put this deal. This is Y axis, this is x, and this is the zed axis. Then we see the screen. It works like that. And we said Perspective 500 pixels. So we are far from 500 pixels to leave. If we move a little bit closer to live. The example we said 200 pixels. As you can see, our previous side is not enough to see this element. So I have to widen it. I'm whitening. And right now the item look much bigger. So I'm walking more and get closer. I am a 100 pixels for. So now I have to write a mice height again. And the item is much, much bigger. So I use transform for the item. I moved the item a 100 pixels toward the set axis. So it came next to the my eyes. I can see only this item. It covers the whole site or me in other road. It covered all my browser screen. So I hope you understood better. I'm changing this to 200 pixels right now. And let's look at the translate pretty high, right? 200 pixels, 200 pixels, and 200 pixels. And without perspective, I can see only x and the y axis. So I am actuating perspective again. Now we can see the set axis also. Let's look at the rotate 3D. I will say here all my axis, x, y, and z. And I will save 50 degrees without perspective, I can see them like that. And I activate this. I can see like that is what age can be a little bit confusing. We will not use this that match in our projects. But if you want to learn a little bit more about protein 3D, you can check this out on the Internet and learn more about this. If you go to developer dot mozilla.org, you can observe all these options from here. And there is complex explanation here. If you want to learn more, you can read them. So that's all for now. I hope you understood perspective. Tot worry about rotating. We will not use it. If you understood how to move item to the z axis, it's perfectly enough. Let's go to next lesson and talk about transform origin. 11. Transform Origin: Let us write here rotate x and try to see without perspective. Oops, not pixels, of course it should be degree. So without perspective, we can see something is happening, but the item is still the same size type of the item is getting fire and bottom is getting closer to Z axis up, you can't see it. I am writing here perspective. Now, it's perfect. As you can see, the item is rotating from the center of the item. Let me make this clear. I will draw here the x and the y axis. I am creating divs x, a 100% height, one pixel, and position absorbed. So we have an x axis. So I'm going to draw y right now on pixel a 100% to centralize them, ISIL fluoride and a 100% minus1 pixel actually, cause his height is one pixel. But it's not important. It's just the pixel. Background bled obsolete and left 50%. Now I'm rotating. As you can see, it's rotating from the center of the item. Centers steady, top and bottom are moving. Now I'm going to say transform origin top. Now top is study and bottom is moving. Top is always the same place. It's our reference point. If I change to the pattern. Now the bottom is my reference point and rotating starts from this point. Let's change this to the z is rotating. Now, it's rotating on set axis. If I say transform origin top and left, our point would be here. So it will start from here. Let's right, bottom right. See. It's really important understand transform origin because in the future you will be drawing shapes and moving them. If you go to developer page of Mozilla, you can observe other examples, other points, and see what can you do more? Solar, we learn about CSS, transitions, transforms, so far. An item you are ready to create those all awesome projects. We are going to start transition projects in the next section. So I will see you in the next section. 12. Social Icons Border Animation Project - 1: Hello and welcome again. In this lesson, we will create the social media icons and we will give them Homer animation. It will be a quick stat. So if you're already less hostile, firstly, I'm going to create a container. Container. So I will create button, actually three buttons on Facebook, Instagram, and Twitter. So on my desktop, I already have this images. I will move down my folder. And inside this buttons, I will use these images. Facebook, SVG, Instagram as BGN, Twitter. Okay. That's arranged this buttons. And that pixels and white pixels saw less change this images. It looks OK, maybe a little bit smaller. Nice. And they're not centres, I shall say display flex. Because if I write here background color, as you can see, they're not centered. So i will center them, justify content. Okay? For Facebook button, I will use two circles. Circle one right now. So for Instagram, I will use one circle. When I say circle to foreign instead graham, so-called tray. So I'm saving and coming here for circle, I will say border one pixel solid and black. It 50% higher, Sufi tar sand and part of radius 50%. As you can see, there are side-by-side and I will keep them position, absolute. Dare not inside our buttons because we didn't Q position relative. And right now it looks OK. Actually, let's let this birthday because, because they will be different for each circle. So for circle lung, which is inside Facebook, powder, one pixel solid, blue. And less change this color. And let's copy and paste this. And first circle two, it will be a little bit picker and border 100 pixels. And this color can be a little bit darker. Okay? And for Instagram, I will say border dashed. And color, tomato, nato, and border, two pixels. Kay? And I will do this images pointer cursor. I can't see this because it's inside enrich and our circle is absolute saw image behind off to circle. So I will move this cursor here and they look okay, now, let's keep them. However, pseudo-class for Facebook, it will affect circle one and actually circled two also. And I want to make them disappear. And after Hong ring, it will be one. But as you can see, there is no transition. And I will add the circle lung transition for 1 second and 0s. I will copy and paste this. And I will add 1 second play. He doesn't look good. Maybe I can say 0.2. So k right now. And for circle three, I will say transition or plus t. Actually not lowpass T transform on second and is, let's do the same thing for Instagram button. Transform, rotate, 360 degrees, and operative all B1. We can't see the opportunity because we didn't give any transition for this. So I will write here S t, 0.2 seconds and ease. Cool. Maybe five. Yeah, it's better. So far a thirt button. I will give rotate again. But first to utter. Transition 1 second, 1 second is maybe ease out. Okay, it looks better, but it's upside down right now. Less change it. I will say here 720. And too fast, I think 260, curl. Right now we completed our buttons. As I said, it was a quick studying. We will do more complex, our fancy buttons, animations and other cool stuff. It was just a beginning. So I will see you in the next lesson. 13. Social Icons Background Animation Project - 2: After this class, we are going to be building these beautiful social media icons and BH fool our transition. If you're ready, let's get started. Firstly, I'm going to be building a container as always. And inside this container, there will be four buttons. You can use any PNG or SVG file for these icons, but I recommend you to use any icon library like Font, Awesome, fugato font, have some.com. You can search any icon here. For Facebook, I all used this for Instagram. This one is good. Twitter. Okay, for you too. And to use these icons, we have to add a CSS file to index.html. So I will write Font Awesome CDN, and I will copy this and paste after my style CSS. Let's check sum. And now let's give you some size for these buttons. Okay? Border, two pixels, solid. I'll center them display or flags. Center, center. And border radius will be 20 pixels. And my icons filled with white. And don't forget if you use any PNG files, forages, icons, you can change color like this and you can't resize them. That's why we are using icon libraries. And after these icons, I am going to add a do class will be filled. 1234. And this film will be 100% high to under person than background color. Again, this black color, radius will be 50%. And I will say at position absolute. And don't forget, again, potential beer relative. Ok, let's make this a little bit bigger. Just found this to cover all this button. Let me do a class name for these icons. Say I come for Icon, Set index will be two, so it will not behind is filled due to animate these fueled deal. I will get this a little bit back, bottom minus 50 pixels and left minus 50 pixels. I will give this button a little bit merging. And I will say overflow, hidden and field, you will be disappeared. For now. Let's say color. Again, black. After animation, it'll be white. For now. It can be stay like that and we can't see what's going on there. Let's add our pseudo-class here. And it will affect our field deal. Transform. Translate 50 pixels, 50 pixels. It will be minus. Ok, let's say 4545. Ok, it covers right now. Let's make this hidden again and see, cool. I will give this transition property all 1 second and ease. And right now it goes size. If I say 0.5. it's nicer. And right now, I will give you white color for these icons. Color white. And right now it's changing also. Cool. It was our second project. We will keep doing these beautiful projects. So I'll see you in the next lesson. 14. Social Icons Project Layer Animation Project - 3: This is what are you going to be building through this lesson? And for this project, I'm not going to use container full screen. Instead, I'm going to use body and container will be smaller. So I'm gonna write display of flags align iTunes, content and background color will be sky blue. And for container size will be smaller. Let's give a background color and see. And I will do a shape or this container. I will rotate this. And as Q 25 degrees. Right now, it's rotated as QED. That's ladies and ladies. And right now inside container, I'm gonna create a button four times. And for this button, I will use highs, 60 pixels, 60 pixels, background color, let's say black, margin, 20 pixels. And we can see right now these four buttons. So I wanna Q, three t periods for this pattern or this, I'm going to q and before. And I will Q a line here. So it will be like pretty button. For this content empty. And that person's height will be ten pixels. Background color. And I will say a position absolute. And don't forget, again, position relative for parent. So it's add to top pint right now, I'm gonna do this button and I will say minus ten because our height is ten pixels, so it will be under this button left 0. You don't have to write this but for consistency and I will give skew effect here, skew X mat 145 degrees. As you can see, it's not starting from the top. It starts from the centre. Remember transform origin. I will write here top. And right now it looks okay. And I'll do the same thing for after. So I will add an underlying content. And right now, it will be a 100% am VHDL be ten pixels, background, color, and position absolute. Okay, let's give this Q also transform skew y minus 45 degrees. I will be positioning this left minus ten pixels because our width is ten pixel in right now as you can see, again, it's starting carrying from the center. So I will do this, right? Cool. Let's delay this background color we don't need anymore. And inside these buttons, I will create a span. Actually five span, because we have five layers. So inside span I'm going to paste this Font, Awesome icons for Instagram, for theater, and YouTube. And don't forget to add this font-awesome css. Otherwise it won't work. I will make this smaller and you can see how it looks. Ok. I will send to these icons and color white. Let's play with this. A 100% background color. As you can see, they are side-by-side because of flexbox. I will do this absolute 0 left 0. As you can see, icons moved again because of absolute positioning. So I will take this flexbox. I will paste here. So I will make them a little bit bigger. We'll give you a pseudo-class here, host a class, and it will affect our spans. For every span, it will be a different effect. For last ban, transform, translate 40 pixels minus 42 pixels pixels. And I will copy this and paste again. For, for child it will be 30 pixels, two pixels. And APA steel will be changed for air we span. It will be a little bit slower. Nice. Let's do this for other children. Third Man, to any 22nd plan, 10100 plus t will be 644. Last child, it will be 0.200. Ooh. It looks good, but I'm gonna give some colors for these buttons. For every child, it will be a different color. So I will say first child, our background color will be royal blue. Nice. Let's copy this and paste. For Eric children. For Instagram, it will be a tomato or tutor for you to pick will be red. Nice. Maybe I can give a border for them. One pixel. Solid. And same color. I'm not sure it looks good or not. I will reduce to a little bit, maybe lighter color. It looks better right now. And let's make this 1 second. That is, it was a really cool project. And if you are confused about skewing or transform origin, please go back this previous lessons and watch them again. So if you understood every team, let's go to next lesson and I'll see you there. 15. Social Icons In a Button Project - 4: I'm changing this colour. It will be yellow. And our container will be our button. A 120 pixels, height law B52 pixels and background color. And I will create here a button in this container will be our main button and Button div will be moved from this container. And in Font, Awesome, I'm looking for a Share icon. This one looks good. I'm going to copy this. Nine will search for other buttons. Let's look. Okay. I will center them. Display of flags and line item center. Justify content, space. It only there's teet together because we didn't Q and is high's. Now it looks good. And I will say color white, flight. So I will copy and paste them quickly. There was our button and I will create a second one, and I will add icons inside this deal. Per Twitter and Instagram. Right now they're in same container. I will separate them. And person and that person position while they are absolute. It will be underneath this container. It's here right now, but we can't see, we don't have any color that say yellow loops because we didn't give relative position for container. And right now it looks OK. Let's make this black and we can see properly display flags Center, just fire content space only. Okay. Let's let this background, it's here right now. If I say overflow hidden, we will not see these buttons anymore because it's not inside container NMR. And for these tags, I'm gonna use another font for days. I'm going fond start go-go dot com, and I will choose robots, and I'm going to choose all of the sizes. And I copy this link. And inside our index.HTML, underneath our font-awesome css, I will copy here. And I need to use this font family. Let's say inside body, the eight looks better right now. Let's say a cursor pointer. And I will give you a hunger for container. And I Howard is to share tags and this icon will move to top for text. Let's give a transform. Translate. Why 50 pixels? We can't see right now. Because we don't have any transition at all. 0.22 and is in pipe now how it's going button. So it will be minus. Nice. So I will give this icon a className equal we share. For the social media icons, it'll be icon, icon and icon. I will copy this and paste. It will be far Share icon, let say 0.3 seconds. And I'll do the same animation for Share button. Okay? And I will move the social media icons. But first let's give a transition for them. For a child to. And I will increase this duration. It will be per child. And i will apply same animation for high consortia. I have some. Let's change them a little bit. You know, before was better, I think. Hey, it looks pretty good. You can play around these transitions and you can do whatever you want. For me, it looks okay right now. So we have finished this project. Let's go to the next lesson and I'll see you there. 16. Social Icons Rotation Animation Project - 5: I'm creating a container. And the container will be 60 pixels and position relative. And inside this container, there will be four buttons. And one span, which includes our plus. It looks like that right now. Main icon. Let's center it. Phone size will be 50 pixels. And for button size will be 30 pixels. Background color, slight blue. Buttons. I will add again this social media icons. I will copy and paste stem, envelope and SMS. Let's send to them via Xbox. And color will be white and cursor Pinter. And these buttons will cover our container. Let's say a position absolute, and right now they are at the same point. Let's change this. For all children, position will be different and also a border will be different. For first fun, top 0, left 0. Let's copy and paste that. Second dart and Fairchild. And for second one bottom will be 0. Now let's move this to the right, top, right, bottom, and left. And last term will be bottom and right. Go. And there is no border, as you can see, let's arrange this for of Kurzban. If I say border-radius ten pixels, all these ages will be ten pixels. But I don't wanna do that. If I say 010 pixels, 00, it will change the right-side. So I don't want to do this. Right now it looks okay. Let's copy and paste this again. And for second plan, right will be ten pixels. And third man, left and bottom will be ten pixels. And for last one, bottom and right will be ten pixels. And before copying these icons, I go Damn icon as M class name. So I will use this icon small and opacity will be 0 right now. And I want to see this plus tax. If I come to Maine icon and say position absolute. So it will be appear and let's change the color white. And I will give you a higher effect right now. Container how're will affect small icons. And opposite T will be one after hollering. And I will change main icon also. And I will give you a scale. It will be five times bigger, and I will rotate it. Let's say 45-degree. Ok. Let's cue a transition for this icon. All 1 second and ease in. Maybe is an 0.5. left skew and animation. And for other buttons. For first child, It will be on top and center at say, five pixel. Now that of course, something wrong, we will change this, but before I'm gonna give a border-radius effect before this. When we, however, it will be 50% radius and size will be bigger. The pixels, like this cursor pointer. Right now it looks okay. In this translate, it goes to top 50 pixels and the right five pixels. Let's do this for the second child. It will grow to write 50 pixels and go to bottom five pixels. Nice. Let's do this for other children. Minus 55 pixels, minus 550 pixels. Child for right now it looks okay. But I didn't give any transition. So I will copy this transition and paste here. So it looks nice right now. Maybe easy in, out. Yeah. So let's make this 0.20 seconds. Nice. And r is rotating and scaling and our buttons are moving, uploads critical. And right now we totally completed our project. Let's go to next lesson and keep doing this cool projects. 17. Keyboard Button Project - 6: For starting, that's created a button do. And inside this div, I will write it as pan enter. And I will give a font-size to an a pixels. And for our button, it will be 200 pixels and a 100 pixels. And background color will be light PI. Flexbox centers. And less change this text color. And I will give a parter, it's well below one pixel solid and this black color. And for the 3D appearance, I will give a box shadow and bottom will be 40 pixels. And let's say black and see. I will change this color. It was similar to a light pink part, a little bit darker. And for the trivia periods, I will rotate it, rotate x 60 degrees. As I mentioned before in previous lessons, we had rotate x, It's going behind the z axis. So we have to give a perspective. I'm going to parent and giving perspective. Let's say 1000 pixels pure right here, like a 100 pixels, it will be bigger because it means we are close to item. So it looks OK right now. And I've all q as pseudo-class, active class. Remember, active class works when we click the item, when I click here, it will work. I will say transform, rotate x, 60 degrees, Translate Y will be far too pixels because our box shadow is 40 pixels from button. So we will move the item to down. And for the clicking effect, I will delete this boulder shadow. I'm sorry, a box shadow. I will say none. And right now it works properly. And don't forget when it comes to design. There is no limit of your imagination. This is a small project, but it teaches us how we can queue item, 3D appearance, and then click damn how to move items, how to make them look like 3D buttons. Songwriting EPA has really useful. Let's go to next lesson and create an, another project. 18. Skewed Cards Project - 7: I will create my cart to use here. And for each card, it will be 20% and higher. It will be 8%. Border-radius to any pixels. Box shadow, 010 pixels, two pixels, and his grey color, you can give any size for this bach shadow. If you go to any box shadow generator website, you can arrange any properties here, up-down, right-left, spread, blower, and Opus T. When you arrange What you want, you can copy this and paste a CSS file so you don't have to memorize any of them. So I will give you a transform. I will rotate them, rotate x 60 degrees. And I will give you a perspective like last lesson. And I will make them a little bit small. Scale 0.7. And for each card it will be a tittle at say, creativity. And I will do an image here. And lastly it will be a description. If I write here Lorem and press Tab button, it will generate random sentences. I will copy this and paste or other cards. And on my desktop I have images. I will copy and paste them or move them. Okay. First image will be cartoon as VG, Cart two and Tuckman. Okay, of course it looks uglier. Let's play with them a little bit. A 100%. It will be 40%. I will make this big C, p and n. You can see better. And I will center all items in the cart. Display of flags. Lacks direction, will be column, line items and justify content. I will say space around. Let's give a padding. Looks. Ok, right now, maybe I can make this description a little bit shorter. I'm choosing all of these and make them shorter. Yeah, it looks OK now. And let's give it a how're But before I will give a transition for a carts and then i where i will take bag is rotating effect. Rotate well-being zero-degree. And scale will be one. It will be original size, and I will move them a little bit up, Translate Y, ten pixels. Cou. Let's change this. I will give them a color. It will be a this grayish color font with Welby bulb 900. Yeah. I hope you enjoyed this project. Of course, you can play around these descriptions or images, this rotating staff and make this fancier saw if you understood everything Glasgow to next lesson and look at our next project. 19. Animated Button Project - 8: I'm going to create a container as we always do. And inside this container it will be a tumor containers will be interacting with. And second one, tax container. How container will be 400 pixels and height will be a 100 pixels. And I will give a background color of our whole screen. Light sky blue. And interactive container will be 100 pixels, height will be the same, and background-color karl. Let's do lightweight. And for our text, the container will be white. Eyeballs highest dam. I will move it next to the interactive containers I am writing display flex. Let's right here at taxed. Share with friends. I will send to this. And I will make this tags flicker. Font size 20 pixels and font-weight bold. Actually a 500. Firstly, I'm going to write here position relative because our items will be absolute and I don't want a dam to be overflowed. Let's create a Person. It'll be our head. Eyes. There will be two eyes. And mart. And for person, 50 pixels by 50 pixels, background color will be called. And let's make them circle. Actually, I will change this color. I will say position relative because our items inside personal like eyes will be absolutely. Let's change the ice. 0.05 pixels, 20 pixels. And for now, let's give it a background color so we can see it. And position absolute. I will say top ten pixels and left 2.5 pixels. So I'm gonna create an AI. Let's delete this color. We don't need it anymore. Ham giving sizes. And background color will be black. Powder radius 50%. I will make them in Hammurabi's saw display flex, and justify contents will be a space between, Let's create a mouth. 25 pixels, high, 20 pixels, and background color black. And I will give a smiling effect. To do that, I'm going to write border-radius 0060, 60%. And radius will be on the bottom and left and right side. I will say Top 25 pixels. But first we have to say absolute. And left to any pixels. Now it will be 7.5. Okay? A first-person looks really good. And I will give this another class, smiling person. And I will give a position. Position absolute. Top 25, left 50. So it will be at the center of the container. And I'll copy this person and paste here, and it will be our surprised person. I will be positioning this also strides price. We can't see it because it's at the exactly the same position. That's a bottom. Minus 50 pixels. And write minus 50 pixels. It will be outside our container. And with animation, it will move into our container. And there will be a box which contains our dots. I will write here a couple dots, and I will make this Bach's Air Command bubble. To do that, we can go to Google and right here, Clip path generator. So I'm gonna click on this website and this website, you can draw any shapes. There are many shapes here. I will choose this message box, so I will copy this and paste in the bulk Steven. Let's give it a size. And background color will be white. As you can see, it's the exactly the same shape. Position relative. Top 12 pixels and left 52. Let's change those a little bit. It doesn't matter how much space you are doing. You can arrange this for yourself, but this comment bubble will be upside down. So I will say transform, rotate a 180 degrees. Okay? So let's do this dots. And we'll say position absolute, top 30 pixels. Trying to be center of this box. And don't forget, this box is at Clip path, so we don't have to exit size. So I'm going to apply around here. Ok, it looks centred. So4 mouth, I will change the class name. It will be a special forests priced person. I'm gonna copy this and paste here. I'm gonna give sizes and background color. Powder will be 50%. So it will give us the surprise defect position absolute. I will center this mouse 25 pixels and laugh to any. And our second person is okay. I will give this bogs opportunities for now. And I will give you this person transition. It will be all 1 second and ease. So when I hover to container, this people will move, Let's say translate minus 50 pixels. So they will be going to left and for y axis it will be 25 pixels. So they will be moving like that. Are smiling person will be moved like that, but surprised person will be 50. Cool. Let's copy this and give an opportunity for the bugs. Okay? So I will give this box at transition 1 second and ease. And it's animated now, but this person is out of the container. I don't want to see this, so I will say overflow hidden. Perfect. I want to move the eyes off to this smiling person. So I will say container, how're smiling person and ice. Then it will be moved to x axis. Let's say 20 pixels. It should be separated, of course. So I am going to do the same thing for a mouth. Perfect. I'm gonna give a translation of our eyes and the mouth. Copy and paste this pixel. It will be a second. It looks really nice. So it was a really cool project. You can change sizes, are positioning. So if everything is okay, let's go to the next lesson and keep doing our projects. 20. Animated Menu Project - 9: And you build a responsive web application. You need a hamburger menu like this. Then we click on this button. The menu elements will appear here with a translate transition. And the first and the last line of this button will be rotating and creating across and the second line will disappear. And then we click it again. It will be the same shape like at the beginning, we are going to need JavaScript code to do that. But don't worry, it will be just a couple lines of code and it will be really, really easy. You're gonna understand their routine. If you are already less jump into decimal. Before starting, I'm not late. Flexbox, We are not going to use this. So firstly, I'm creating a line container div. And inside this container there'll be three lines. Line one, line two, line three. And after that I'm going to create a list. I will create a many container. And inside container there'll be a list. That's a portfolio. Products and contact. Okay? So for this line container div, I'm going to write Margin 20 pixels. We'd all be 40 pixels and hired 30 pixels. And I will say cursor pointer. And now I'm going to create lines. A 100% and height will be two pixels, background color or black. And I'm gonna give a rotor radius tests ten pixels. And I will make this container of flexbox, flex direction will be column. And I'm going to say justify content space between, okay, are cline container is ready right now, let's make this list a little bit clear. Many container, 100 pixels, height will be 400 pixels. I'm going to give a padding position relative, let's say left minus a 150 pixels. So right now it's here. Let's comment this out and we can see, I will not let this list-style, list-style none. And for list items, I'm gonna give a margin. Margin bottom will be 20 pixels. And now I'm creating a JavaScript file app dot JS. Let's let these images from last lesson. So firstly, I'm going to choose many container. I'm gonna say const manner container, document dot query selector. So I'm gonna write here my className. Meno container saw what I did here. I choose these many container from our JavaScript file. If you don't know JavaScript and DOM Fourier, it will be just a couple lines for short explanation, query selector, just selecting your divs or any elements in your HTML file. So I'm going to do the same thing for the list container, sorry, line container. I will say line container. And I will add a listener for this lab container and we'll say click. It can be colleague or mouse over. Or there are many, many options for event listener. So we will use just a click or now, so I'm going to create a function and I will write here after clicking this line container, I want to do something. What I wanna do is I want to change this line container class_name. So far doing that like container dot class list. And I will say Toggle. And I will add active venue. Do that after clicking the line container class name will be changed. Let's see here I'm clicking. Nothing has changed because we didn't use this app.js file. I will write your script source chairs. And right now, as you can see, when I click, land container is changing into a line container active. And when I click again, it's changing to line container. This toggle is working like that. So I will do the same thing for the menu container. As you can see when I click here, Lang container and many container clusters are changing. And that's all of our JavaScript file. You don't need anything else. Right now, this list will be left of the screen. And when I click this button, it will appear again here. To do that, I'm indicating here menu, container and active. If it's active, I will say transform, translate X a 150 pixels. And I'm going to activate this right now. It's beyond to our screen. When I click this, perfect. And I'm gonna give a transition. All 1 second and ease. And right now it's animated. Our list is red right now, there's change two lines. I'm gonna say a line container active, which means if line container active is exist, the line one will be rotating. I will say rotate 45 degrees. Nothing has changed because it will be dash one. And right now it's changing part, remember the transition original lesson? It's rotating from the center. I have to move this to the left. Hold say transform origin will be left, right now when I clicked, It's rotating from the left. I will copy and paste this. And I will say Lyon tree, and it will be minus 45. And for a second line, I don't need it, so I will delete this. I mean, I will make a posterior Zero. Cool. Let's separate this transition for transform and opacity. Opus T will be 0.5 seconds and ease. Right now it's faster and that's all. If you're confused about JavaScript, you can search for on the intranet and learn about basics. But I believe that you understood everything. It was really easy. One saw big completed our transition projects. I hope it was benefit for you. Saw we will continue with animations. There'll be other projects are their core staff and we will do more complex things. So when you're finished this transition section, rest a little bit and start with animations. So I will see you in the next section. 21. Understanding Animations: Animation, let's an element gradual change from one style to another. You can change as many CSS properties as you want and as many times as you want. And you can arrange specific moments and ratios. Yes, we can do it where transitions, but we have only one chance to automate our items. In transition. We have only the start point and the app point. We have to do everything in this duration. I cannot say, hey, stop right here and change your shape and move on. Stop here, change your color and move on. I can't do that. I shall do everything through this duration. Let's see. I have transition all or seconds and linear. I want to move it to the screen on x axis and rotated. That's all. And with animation, we can arrange our single points of this relation. Let's assume that on the mentioned beryllium is four seconds again. I can say in 1 second, rotate these live. In the next second, make it Brown. I wanted to be violet and scale after 1 second and after them, make that circle and make it bigger. Let's see ION animation. That takes four seconds. I have all properties like law, which we will learn in the next lesson. And as you can see, our animation behaves like four different transition. And it's doing this forever because I gave it infinity value. So in a nutshell, in transitions, we have only two points, start and the end. To admit it, we need an action. We have to refresh page or how or something, or click something. And we cannot use any loops. It moves and ends. I cannot call it back. On the other hand, in animations, we have endless points we can use in a time period inside the total animation duration. We do not need an action. We can use loops and it moves forever and it's easier to use for beginning. It can be more complicated compared to transitions. But once you learn it, it will be easier to use it. And that's all. Let's jump into the next lesson and take a look at animation properties. 22. Configuring Animations: Let's look at the animation properties. I have prepared an animation here. There is a box and its width is growing. And for transition, we had to do this weird hover pseudo-class, but I will just run here and I run in Scroll. Firstly, we have an animation name. I named it as an example, and I am using this name. We add keyframes. I'm writing at keyframes and my animation Napier example. And inside this, I'm deciding my animation duration for every stages. Only one animation from 0% to a 100%. You can just write here 24 inside it to, I'm writing what I want to change. I want to change with it was a 100 pixels here and I am changing to 300 pixels. We can adhere from, it means it starts from with this property and is changing to other property. So it will start from 200 pixels and it will move to 300 pixels. As you can see, then animations, tablets, it's going immediately 200 pixels and growing to 300 pixels. For instead from to. I can change this as persons. I will say 0%, which means the beginning. And I will say here a 100%, which means the ending. It's exactly the same thing. And right now I am coming here and saying for middle of the animation, 50%. Let's say with 150 or 100 pixels. When I run it. As you can see, it starts from 200 pixels and it's reducing size. And after 50%, it's increasing again. So I'm gonna delete this. If I say a 100%, I'm running, it works like the beggining. And other property is animation duration. I will say this poor seconds and it will be slower. If I say it is 0.2, it will be faster. Let's make it again 1 second. And I want to add animation delay. It will start after 1 second. Let's make it again 0. And here I can say, how many times does animation world work? I said to 12 and stops and changing this back. Now we have a animation direction. If I say this reverse, it starts from a 100% and it's coming to 0%. I can say this alternate and it plays the animation forwards, backwards. It was not good example for this part you will be learning in the next classes. It's really useful if you are confused right now, don't worry. And here we have an animation timing function. You're already notice. I don't want to explain everything there is, is in, is out. And steps. We did all of these things for transitions. And I can use also cubic barrier. As you remember, inside this we can indicate our function. I'm changing to linear again, and there is our animation feel mode. I'm changing this to the forwards. And when I run this, as you can see, it's tops there. And nothing has changed. It starts from 0 and when it comes to a 100%, it's pups and it's not very impact. And again, it was quick explanation. We will use only these ones. It's totally enough, perfectly fine to do all of these animations. If you wanna learn more, you can go to Mozilla developers page and you can read about this. And one more thing. You can write this animation in one line like we did this and the transition section. Let's get started with animation projects. And you will be understand everything here. 23. Arrow Button Project - 10: After this class you are going to be building this down arrow button. You can use it after the header or before your portfolio layout. So it's really a good example for a real world project. So I will create quickly container do here. And after that, I'm going to search for a down icon on Fantasm. Let's choose this one. Looks good. I will copy this and paste inside our container. I will openly at live server. Let's give a font size 50 pixels. And for this container, which will be 75 pixels height will be the same. That center lamb. Now I'm going to give background color corral. And it will be a circle. I will say a position reality because I will cue and other circles. So it will be animated. Wholesale container before content AMT, a 100%, 100% and position absolute. Border-radius 50%. And background-color curl again. So it's exactly the same shape like container, I argue as xhat index because I want to see the is button. Okay, less change colour, it will be a white fight. Okay, so I will give an animation here. I will say the name is mu 12 second is and infinite. It will be moving all the time. I will say add keyframes mu, it will be only one animation from 0 to a 100%. So I will say to transform scale 100.5. As you can see, our second container is growing, and I will give it a pasta here. So end of the animation, it'll be 0. Cool. That's all. It was really, really simple example, but it was really good for the beginning. So as I said, is good example of how the real world project, you can use it everywhere. So let's go to next lesson. I will see you there. 24. Hovered Button Project - 11: I'm going to create a button hero. The class name will be button one. And Howard to die. I know it's not funny at all, but I wanna do something different. I will say about the none. Padding 15 VS will be 200 pixels, and I will make this text bigger. Color white. Let's change the position relative because we are going to using before and after button one, Welby background color black. And let's create a buffer. Content will be Jiaqing. So it will write joking here. A 100, 100% and position will be an absolute. So it will be on the main button. Background color can be purple. Let's center it. Font Size can be bold. Not size, weight. Maybe change. Baldi's, okay. I will say top 0 and left zeros. So it will be at the exactly same point. I will copy this and do this for after. I will write here, don't worry. And I will change color to red. And right now bottom will be 0 because we will animate this from the button. And I will change the height right now. It doesn't look like Hi t 0% because we have a text inside. It's our flowing. So I will say how powerful our hidden. I will give an effect. It will affect our before class, pseudo-class. So I will create an animation, let say retrieve 1 second, alternate and infinite. And for the after, it will be the same animation. But I will do this later. Let's say keyframes retrieve. And in a 100%, it will be a 100%. As you can see. And I will copy this and paste here. If I comment out this, it will be like that. Let's change this to Harvard. So it will not move all the time. After one animation, it will be stopped. Okay, let's skew a delay here. So it starts after Jiaqing. And it works infinitely. Has you can see we're right our animation in one line. It's like transition. Actually. We are writing our animation name, Duration, Delay and our function and Phil function, our team in one line. And remember what alternate task our animation works one from the beginning and to the ending than it works again from the ending to the beginning with the same animation function as you can see, don't worry, DU is going up first time, coming back to the bottom with the same animation. So we don't need this forum talking to because it will stop after working on time. But anyway, so we completed our button right now, let's go to the next lesson. I'll see you there. 25. WhatsApp Calling Button Project -12: In this lesson, we are gonna create this calling phone makin. It's similar to what SAP button. If you are using pops-up, if you're ready, let's get started. Firstly, I'm going to search for some form button on font epsilon. I'm going to copy this. And firstly I'm going to create found do and I'm going to paste it. So for our do, I'm gonna give you some size here. And that ground color, lime, lime green. And I will center this border-radius 50%. And font size 30 pixels and color white. I will give this icon a class icon. And I will rotate them a little bit. Rotate minus a 130 degrees, 30 degrees. And I will add two circles to found deal. Before and after. It will be 60 pixels. Position absolute. And I will give you content. Bordeaux reduce will be 50%. And border one pixel solid and lime green. Let's make them a 100 pixels so we can see right now, let's take back I'm far from before. I will give an animation. I will say mu, 1.5 seconds, linear and infinite will be mood all the time. I will do the same team for after, and I will give you a delay. Let's arrange this move animation 0%. And i will make them a little bit smaller. And opposite T 0. And it will start like this. I will copy this and paste twice 5000%. For middle of the animation scale will be one. And end of the animation. It will be a 1.5, of course, a positive one. So it works. But I want to move this phone icon also saw, I'm going to do an animation here also, I will say is shake 1 second alternate and infinite. And for this animation, shake, sewer percent transform rotate minus 30 degrees. It was already like this. I will add coupled time small t for t, nearly 69, we'll say 25. For ending it will be a third five also. Oops, something wrong. Okay, it looks okay right now. Let me make this bigger and see. Cool. It will be a small project, but it's really useful you can use in your web application or mobile design. So that's how I'll see you in the next lesson. 26. Heart Beating Animation Project - 13: We are going to need heart image. So I already have on my desktop, I will move this in my folder. So I will use this image, hearts, PNG. Let's make this a little bit smaller. A 100 pixels. And I will cue and animation. I'll say beat. So 0.72. Linear and infinite. Keyframes beat 0%. Transform scale one. So it will be same size. I will say a 100% here also. So for 30% transform scale 1.3, I will paste this couple times smaller. Let's say 50%, 70 percent. Now, I already wrote rounded percent. I don't need this so far, 50%, it will be 1.2. For 25%, I will Q a rotate more. It will be S1, Vickrey, maybe, maybe five. And we can see right now, but too much, let's make the story. Or to hear it looks good for understanding how this animation works. It was a good example. So I will see you in the next lesson. 27. Text Animation Project - 14: As you remember, before starting Transition projects, we made a primitive animation. And right now we will do that text animation with the animation property. I will write here h, h1 tag, and I will write up design. Let's give it a background color of the screen. And for the text, I will say font-size, a 100 pixels. Font-weight, 800 pixels, and position well-built relative because we will use before. And font color will be the same. So right now, I will give a text. To do that. I will write here text shadow. And it looks like that. And I will create a before a pseudo-class content will be the same. I will change the color and texture. Shadow will be none. I don't wanna be spodosol again. So I will say position absolute. So it will be on our H1 tag. And we'll say top 0 and left 0. And I will create a boater next to the this text. It will be partly right when a pixels solid and same colour. If I make the speaker does tags is going down because of this powder. So I will write here y space. Now we're up. So it will not be raw Panama. Well, let's give an animation. I will say mu two is seconds and linear, and it will be infinite. Keyframes. Mu. I will say too, right now as you can see, our width is a 100%. I will come here and right here with 0, cause I wanted to be a disappear right now, if I say with ten pixels are boulder will be here. 20 pixels. It's going more. Of course I say overflow hidden because I don't want to see these tags. Now after animation, we will see, as you can see, it will be moved like that. I will come here and say with a 100%. So it will move like that. If you are confused about overflow hidden. Let me explain. If I say here background color. And we'd under pixels. As you can see, this is a 100 pixels. I will comment this out. If I do that, we will keep seeing these tags. Are tags container is a 100 picks us our boxes here, but tax is our flowing. So that's why I'm using this. Let's let them again and our animation is ready. So that's all. I'll see you in the next lesson. 28. Poseidon Wave Animation Project - 15: So first the I want to change background color. I wanted something different. So now I'm going to create a box D. So this D will be 200 pixels. Background color will be lights late Gray. I'm gonna give some border. Or the five pixels solid and lights, light gray. I will comment this out and we can see the border. We can't see because same color. So I will say position relative because our wave will be absolute. I'm saying box before, it will be our text. So I'm going to write here plus a1. Let's give a font size, 32 pixels. Font-weight, Dolby bolt size will be the same. I'm going to center this cold that skew a color. Hit will be light. So right now I'm creating my Wave. Content will be empty. It will be a 200% higher, will be the same. And background-color sky below. I'm gonna say position, absolute. Border radius can be around 30%. I don't wanna make it totally circle, but this border-radius is good. That's position. It left 50%. So I will rotate it with an animation. So it will rotate and go to up. So I'm giving an animation wave. Five sentence is out and it will be infinite. Let's play with this animation wave. I'm going to say to transform translate Y will be minus a 2%. Let's see. Yeah, it's covering our box. And I'm gonna rotate also to give waving animation. How will save 500 degrees? And it will go like that. But it should be central off to bark. So I will say left minus 50%. So nice. And I have to add overflow hidden. So I don't want to see it is way outside of the box. Coal. Of course, you can arrange this rotate degrees and the speed of going up depends on you. So that's our last jump into the next lesson. 29. Text Wave Animation Project - 16: Welcome back. So we are going to create a waving animation again, but it will be a little bit different because we will use clip Pat when it comes to drawing something or animating items, using clip path is really, really useful. Saw, I want you to learn this because you will be using this all the time. So let's go and create this cool stuff. So firstly, I'm going to change this background color. Again. I will say light coral. I really like this color. So I will create a text like Kuwait. So I will create a second plan and className will be Tags liquid, and previous lesson they worked with before pseudo-class. So I wanted to do this different way. So I create a different texts, but it will be a world-class before a pseudo-class. So if you want to, you can use only one H1 tag. And for the other you can use H1 before or if one after, doesn't matter. So far, this H1 tag, I will say font-size 150 pixels. Font-weight will be 800, so I will say position absolute. So these two tags at this same place right now. And for first one, color will be light gray. If I comment this out, we can't see our text. And I will give air text shadow, as you remember I explained is text shadow. If you don't remember, you can go to this lesson. And for second text. I will say color lights cable because it will be a water. And I will give you an animation way, pretty seconds and easy out. And it will be infinite. Keyframes. Wave. For 0%, it will be our clip path. It's the important part. As you remember, we had a useful website clip Pat generator. I am choosing custom polygon so I can draw my own custom shape for I will create my first shape. It will be the first shape or my wave. So it will be like this. I'm creating this and I'm going to copy this. And paste here. Let's see. And I'm going to refresh this page and create second shape of the way. But remember this, your point number should be the same. 123456. So if you did this less or more points for the first one, you have to do this the same points with the second one. So I will copy this also. And I'm gonna say here, 50% and paste this here. Perfect. You can change the shape. You can play around this, but for me it looks real, Cole. So we've completed our project. Let's go to the next lesson. 30. Loading Animations - Projects (17-20): In this lesson and the following three lessons, we're going to build some awesome loading animations. And you've had some data or waiting for loading your pages, you can use these animations for lead, start doing first one. So I am creating a container. Inside. It will be a text loading. And I will say circle container. And there will be three different circles. Circle, circle too far if you pay attention to is a common class name called circle. So let us start with the container with moby 200 pixels, high probability same display of flags, howl centered this flax direction will be column because our dots will be under the loading taxed. Let's make this coral and follow a circle. Container. Display will be flags because I want their circles side-by-side. For a circle, 20 pixels by 20 pixels. And border-radius will be 50%. I will gain margin. For each circle has different color. Circle one, background-color tomato. Copy and paste this twice. Circled two. That says Holman and coral. That's made this original size. Okay? And I will give this circles and animation loading 1 second and infinite. I'm going to write keyframes. Plotting two are under percent doesn't matter. Let's make this opacity 0. And our animation FOB a one. If I say here, alternate, it will look better because remember what alternative does? It goes from 0 to a 100% and comes back with the same animation. So it looks pretty good. It was our first loading animation. Adds to the Second Law. I will play this opacity. And I will make this animation 0.5. seconds. I don't want a day's loading tax anymore. So let's come here and say 2525%. I will say at transform, translate. Ten pixels and minus ten pixels. I will copy this and paste this. Ps1, 50%, 75. Um, for 50% it will be a 20 pixels, two pixels. So it would go to pick point. And after that, I will move this x axis. Again. The pixels part y-axis will be down and a 100%, it will be 30 pixels and 0 pixels. So it's like that. I really liked this one. So let's do the hard-won my HTML file. I will take this loading tags underneath myCircle container. I will delete this animation. So I will give Hahn played. It will be tenor. And far a circle container. There will be bottom proto, two pixels solid and like curl. Like this. Padding 0. And let's delay it is bottom margin. It will be only for left and right. So let's make this animation. I will say two. It will be only one animation. Transform, translate it. Why? Minus 100 pixels? I will come to circle two and change the animation delay. It will be 0.12. I will copy this and paste parser called three. And it will be 0.2 seconds. And right now they are moving differently. But it looks really, really nice. Now has looked at from big screen. So we're completed turtle, I'm also now start with the FARC BAM file. I will delayed hall of this. It will be a tax animation. I will delete this also, and I'm going to add H1 tag. I will say a loading where it lower case. How far 81. Font size will be 50 pixels. And I will add a text shadow. Let's make this color white and we can see the tags shadow. I gave one pixel and gray shadow. And I will say position relative. I'm gonna be using against pseudo-class H1 before. Content will be the same text and color will be a light pink. I want to position this inside the tags. So I will say position absolute width will be 0. So our hidden because we have text and it's our flowing. If I say here ten pixels, as you can see, moving to the right side. So I'm going to add here an animation. I'll say move power seconds, linear and infinite. Keyframes, to where it will be a 100%. Nice. You can use this animation as loading clay out four pages are when you upload something, you can use this also. It's really handy. So, so far we did for animations, for loading pages. So we have completed this lesson also. We can go to the next lesson. I'll see you there. 31. Drop Animation Project - 21: I will create here an H1 tag throw up. But I will use this in an, another container because there is also be our drop shape. And inside this container I'm creating my drop shape. So this H one container contains R, p and the shape for one font size will be a 100 pixels color, light blue. And for the H1 container position will be relative because the drop shape will be absolute. Let us write the IR drop. Background color will be the same color. We 28 pixels and high 25 pixels. And position absolute. I'm gonna say a bottom 60 pixels less change this color part. Now, of course you can shape this drop, but I will use clip path. You can give any border-radius and create this shape, but I will use this one. So I'm gonna choose ellipse. I'm gonna copy this and paste here. So it's like that. So I'm going to zoom in a little bit so we can see is there any overflowing? So it looks okay. I can take back this color again. Let's give an animation. It will be moved 20 seconds and infinite. And for timing function, I'm going to use cubic Beziers. Let's make this duration two seconds. And I'm gonna play around this. So it will be slowed down a little bit like this. And it's going to be moving on. Let's copy this and try. If it doesn't switch, we can change. Of course. I'm going to write here keyframes to transform, translate Y 200 pixels. It will go down like this, but it doesn't look good. I will change this to a 100 pixels, make this 300, and we will arrange this timing function. Each will slow down a little bit earlier. Let's try this one. Now it's too late because it should slow down after P letter and then we shall be speedup. So I will stop recording and find something suitable. So I made this one. It works really good right now. So you can copy and paste. These are come to generator and create for yourself. It looks really good right now. So we completed our drop animation. So we can go to next lesson. I'll see you there. 32. Designer Text Animation Project - 22: So I'm going to create a container here. And inside this container, there'll be two rows, row top and bottom. First row, we'll include our title span. Span. That's right here, Harold Brown. It will include also our dark shape. So for row button, there will be our descriptions span. Let us write here a UI designer and will change background color. It will be Cray. And font color will be white. Or container, I'm gonna say it display of flags. Flex direction will be column saw. Our title and description will be in different client side. I'm going to write here first row, display flags and align items will be baseline. But I will explain this later. Position relative. And for title, color will be, sorry, font size will be 30 pixels, and font-weight will be bald. I'm gonna give a margin right? There will be a space between title antidote. So I'm going to create dots here, seven pixels, seven pixels, and border-radius, 50%. Let's give it a background color. It will be called, as you can see, it's the top of the container. To fix that, I will say here baseline. It looks good right now. If I say here at the center, it will be on the center of the text. If I say here flags and it will be our flogged comparing the text because there is a space here. So I will come here and say baseline. So they are in the same line right now. Let's queue here as pseudo-class top row before. Contents will be empty. Position, absolute size will be a 100%, so it will be like our container. So background-color called. Let's give an animation. I will say move box two seconds and forwards. So after animating, it will stop. For timing function, I will use cubic Beziers. Let's make this duration two seconds, and it will be like that. I'm going to copy this and paste. Let's give it a key. Frames. Move box. I'm going to say 0% or from, doesn't matter. Left will be minus 200 pixels and 400%, left will be a 100%. So it will move like that. I want to see this animation inside our container. So I will say here, overflow hidden. If I refresh this, it'll work like that. So I'm gonna give an animation for a title also. For our beginning of porosity will be 0. And summation. More text. Two seconds. I will give a delay, two seconds. And forwards. I gave and delay because it will work after this container is yellow one. Keyframes move text to be one. Okay? So I will copy this posterior for dot also and animation. And this animation will after more text animation. So I will give four seconds delay. Actually I wanna view and another animation for this dot. So I will change this mooc dot two seconds delay and forwards. And my timing function will be a cubic measure. You will see right now. Keyframes, mooc dot for 0% transform, translate Y 0 pixel. I will do the same thing for a 100% 40-50 percent transform translate Y will be five pixels. And of course, it's getting disappeared because in a 100%, the opus t is 04. A bottom display of flags align items, and position relative. And I'm gonna give a padding. Let's create a before a pseudo-class. Contents will be AMT again. Position absolute. And left will be 100%. And background color will be tomato. We can see because we didn't give any size. Okay, it's the stack point. It will be the same animation. Move box. Two seconds. I will copy this actually. And I will do two seconds delay, and it will start after first deal. I'm gonna write here overflow hidden. Like that. I will give you this description and other color, light gray. Font-weight will be a 100, and font size can be smaller. And for now, let's give the same animation like title. I'm gonna delete this padding for the top and bottom. It looks good right now, when we completed our text animation, we can go to next lesson. 33. Pay Button Project - 23: So I'm changing background-color quickly. It will be a light curl. So I'm gonna create a container first. In this container, there'll be two items. One of them is interactive container and second one is tax container. As you remember, we did something similar in transmission projects. There was a container like that and our text was share with friends. And right now it will be paid now. Okay? Our container with 400 pixels and hide a 100 pixels and background color will be white. For our interactive container, 100.5 pixels. 100 pixels. And background color is till. Let us do the same thing with tax container. It will be 250 pixels, height will be a 100 pixels. And I will say here display flex. And also I will center this Pe now text. Okay, so let's do the palm part. So I'm creating my credit card first. In this cartoon, there'll be carte line and also Card circles. And in this card circles container, that will be three card circle. And after this credit card, I will create a post machine. Inside this machine there will be paused line and afterwards there'll be post screen. And inside the screen. That will be our dollar sign. Let's give a class name text. So after this screen, I am going to write numbers. And the inside numbers that will be nine numbers. We have a Cartier. Inside card, there is a lion and three circles. And after that there is a POS machine. There will be a line and the screen and after that numbers. So far so good. So let's continue. Firstly, I wanna make my credit card. I'll say cart. With 700 pixels highest 40 pixels. Background color will be something special. I will write here. Something like that. And border radius will be a five pixels. I'm going to say a position absolute. First, I shall today's position relative. I don't wanna my items to go out from this container. So I will say top ten pixels and pixels. So we will change this later. It's okay for now. So I'm gonna write cards circles. As you remember, it was our circles container. So position absolute, pop 25 pixel, last five pixel. I will say display flex because they will be side-by-side. Let's do this circles. We had seven pixels, height seven pixels, border-radius, 50%. I will give a margin, right? So they will not be a stick together. So each card has different color. I'm choosing first child. Remember our pseudo element less than and background color will be again special color. I will write here. And I will do the same thing for child two and, and Child three. I am writing here quickly. You can change the colors, of course. So if I comment this out, I don't want to do like that. So I will give margin rate. So you can see here our positioning. Cool. Let's go to you. So I'm gonna create my post machine. Vdd will be 60 pixels, height will be a 100 pixels. I'm going to give a border radius. Ten pixels is enough. Background color will be light grey. Let's position this position absolute. I will say top a 100 pixel. As you remember, our container height is a 100 pixels. So it will be out of the container. I will say left 45 pixels. Display flags. I'll give flex direction column because our line and secretion and numbers will be in different rows. So let's create a line. 50 pixels, ten pixels. Background color, grey. Position relative, because I will use before pseudo-class. And inside this content empty. V, it will be the same, height will be the same. You can write also a 100%, doesn't matter. And background-color Gray. And I will say position, absolute. Bottom minus can pixels far it will go down, actually make this color darker. This one is good. And border-radius I, when I give border-radius only bottom and left and right side, ten pixels. Yeah, it looks pretty good. If you don't find use before pseudo-class, you can create second line and arrange this part. This way is is your EITC. So let's do two hour pulse machines screen, I'll say post 1650 pixels, 30 pixels and background color will be, lets say white smoke. I'm gonna give you top margin, 15 pixels. And I'm going to center this dollar sign. And this dollar sign Hopi, teal color and formed way it will be a bolt. And for this text, I will say opacity 0. For now, after animation, it will be one. So I'm going to do POS numbers container. Remember this container contains our numbers. Let's do these numbers. First. Ten pixels, ten pixels. And background color will be gray. As you can see the overflow right now, you remember our CSS lessons be launched, something called flags were up. I will say here who lack scrap, grab. And right now, if they are bigger than our container, there are going to next line. I will center them first. And here I will give a margin. They look perfect. Okay. Let's give our f hat Krita container, Howard. And Howard, our cart will be animated. So Animation, MOOC cart, 12 seconds is, and it will be a four watts keyframes. Cart. And 50%. It will be transform rotate minus 90 degrees. So it will be where article right now. I'm gonna make this smaller a little bit. And on the x axis, I will mode is 70 pixels. Okay, let's do this for a 100%. I will copy this and paste here. And our translate X will be 0%. So it's going to go down like this. I can center this right now. I will come here and say top 30 pixels and left for two pixels. Good. Let's give our effect for the post machine, but it will be not animation on the transform. I'm gonna move this two up. So I will say Translate Y minus 70 pixel. I will copy this. And I will say here, post text. It's opposite T was 0. I will do this one. But we don't have any transition. I will add this transition for transform 0.4 seconds. At 0.2 seconds. It will be like this. And for post text, I'm going to give on the transition delay 0.2. Now it's too early. Let's make this 1 second group. So right now I want to height is POS machine. So I will go to container and say overflow hidden. Nice. Let's make this Pe now text, font-weight, bold. It really looks good. It, I will use this my next projects. You can use this also. I really like that. Of course you can use cubic busier for timing function and you can make these fancier. But even right now it looks really nice. So we completed our lesson. We can go to the next lesson and learn how to do an effect. 34. Mini Lesson - Text Shadow: Come back. It will be a mini lesson. I'm just going to show you how to create text shadow, how to use horizontal and vertical shadow, and how to use polar radius. So if you're ready, let's get started. I'm just gonna open H1 tag. And inside this, I'm saying hello. It's like this right now. So for H1 tag, I'm going to say font-size a 100 pixels. Let's create a chateaux tax shadow. And we have four parameters, zeros, 01 pixel and read. First one is the horizontal Chautauqua, which means when you use it, it spread your shadow to right or left of to your text. And second one is wet cows shadow. So you are using this for giving shadow to top or the bottom. And the third one, it's our polar radius r1. You use it, it will be spread around your shadow and it will give you a polar effect. And the fourth one is your color. Let's see. We can't see because it's really small. Let's zoom-in. Okay, I will change this time pixels, as you can see, it gives a balloon effect. If I come and say a 100 pixels, it's spreading more and are apostates reducing. So I will give this one pixel and make this pillar tan pixels. Let's make this four. And as you can see, it's moving to write four pixels. It's our horizontal shadow. And I will do this for pixels also. And right now it's moving to bottom four pixels. Let's make this 00. And cool thing is you can use more than one chateaux. I will say here 005 pixels, blue. And it gives Blue effect also. And I will say 0-0, 20 pixels yellow. And right now we have yellow shadow. One more time. I will say one pixel, one pixel, and pixels and black. And right now IK, horizontal and vertical shadow and are polar effect will be ten peaks us. It's really useful. It's easy to use. So That's All Right. Now we can go to our main project. 35. Neon Text Animation Project - 24: So after mini lesson, we can continue with our main project. I will say here night shop, and I will add sub here. So m 24. As you can see, it's up of our text. If I say here, it will be down unless change this CSS. But before I'm going to use a wall wallpaper, I'm more weak here. I'm gonna use this as a background. I'm coming to buddy and say background image URL. So I will delete them. And font size will be 50 pixels. And color white. And font-weight will be tin, let's say a 100. And for 724 text, font size will be a 25 pixels. Let's give em glow animation right now. Glow is in, out 1 second. Alternate and infinite. And keyframes. Claw. I'll use from and to. And starting point. It will be text, shadow and white. So it will be like that. I just gave Tam pixels polar effect. I'm going to copy this and paste it again. And it will be 20 pixels right now. So it's like that. And again, so right now it will be 30 pixels, had color will be this pink color. I will copy this because I will use multiple times. And I'm going to keep giving these layers. I will copy this actually. It will be 40 pixels by 50 pixels, 60 pixels, and 70 pixels. Hopes something wrong. I forgot comma here. Let's delete this. It will now, it looks pretty good, but I will give for a 100% also, I will paste this and I will change them ten more for two pixels, PFD and so on. So that's all are known. Glow effect is ready. I'll see you in the final project. 36. Night Drive Car Animation Project - 25: Hello, welcome to final project. Today we are going to build this beautiful animation. We have a car here which has a vibration effect, and we have a Sun, which has a glow effect. We have here mountain and a rod which has translating effect. And we will do this whole animations. And this rod also has its own rotating properties for is not just an image, it's surreal 3D rod. So if you're ready, let's get started. Firstly, I'm gonna use a background color, but this background color will not be only solid background color. We'll be multiple gradient color. So if I go to Google and say CSS, linear gradient generator, I will click this website. And this website is really, really useful. There are many options here. You can choose your first color. Here, the second and the third. You can move the second and you can see your color separate. You can add additional points. And here you can arrange your angle. And right now it moves here. If I say something like that, so it starting from here. So you can copy this and paste in your CSS courts. But I prepare it before recording here. I will use this as a background color. Let's see. I will start with live, sir. Okay. Something light purple by the top is a little bit darker. So right now I'm going to create a, some lowercase, say some a 100 pixels, 100 pixels. And I prepared linear gradient backgrounds also. I will paste this here. You will see time thing like that. Let's make this circle 50%. It looks good, okay, I will say position absolute before I will give you two body position relative. Top 50 pixels, right? A 100 pixels or something like that is good. I will give a son animation. 1 second alternate and infinite. It will be our glow effect. And from beginning, bach shadow will be 0050 pixels and tomato. And remember our mini text shadow class and box shadow is working the same way. And for this, a, twelv b, yellow. Our Gulp. Cool. So I'm going to create a rot. And for this short, which will be a 100% for now. And height 50%. And background color or black. And position absolute bottom 0. As you can see, we have frame here, as you remember to our weight that I will choose whole document and say margin 0. Ok. I have two images here. First one is car and second one is our road Creed. I will move this into my folder. And for this throat, I will say background image, URL. And great. Let's take, as you can see, it gives a grid effect, but we don't have any rotations. We can't see any difference. So I will make this a little bit fancier. I'll say transform rotate x 90 degrees. Let's say ten degrees or 20 degrees for now. And we will see, we can't see any difference because we don't have perspective. Because remember rotate x is going to behind said access. So I will say here prospective of 1000 pixels, as you can see, it's moving greater. I will increase here the maybe 90 degrees. As you can see, it has 20 opinions right now. But if you remember our transform origin lesson, it's rotating from the center. I will say here, bottom. So it will start rotating from the bottom. So it will be like that. If I say here a 100 pixels, it will be longer because we are closer to item. I will make this with a little bit larger. And it looks pretty good right now. And I will create a car here. It will be our image, car dot PNG. And for this image with 300 pixels, not dot, it's just an image. And position will be an absolute lived 200 pixels bottom a 100 pixels. Okay? But there is something here. I forgot this. Okay? So I'm gonna give an animation here. It will be car alternate, infinite. It's going to be vibrating animation. So our keyframes. Car to transform, translate Y one pixel. As you can see, it's vibrating right now. So for destroys, I will give animation and broad 1 second linear and infinite. And I will come here, wrote to. And I'm gonna move this all the time on the x axis. If I say 100 pixels, whoops. Now we forgot rotating. Of course, if we don't write this, it will go back to 0 degree. It looks good now about something wrong is sharp P minus coal. But as you can see, there is something wrong here. It stops and start again. So how we can do this translating in a smooth way. So i will come here and look at these create. And here dimensions is 40 pixels, as you can see. And our screens, our 19-22, generally, divided by 40, they will have 484. I can use these 484 Maya translate X. It can be 480 pages. Multiply it by ten. As you can see, it's smooth white. Now, I can do this 240. I just divide it by 220 divided again, and it can be 960. So it doesn't matter. We have a problem here, but it's because of weight of the rod. I will do this to a 140 and it looks really good. So if I zoom this out, as you can see, our road is moving all the time. So it gives us a 3D effect. So I will create here a mountain. And for this mountain, I will use a clip path. If you remember, we have a website. I will choose here custom polygon, and I will create there custom. Okay, I will copy this and paste here. I will give a size 1200 pixels, 200 pixels and background color will be black. Coal. Pollution will be absolute. I will say bottom 30 pixels. Now it's so small, 300 pixels. But if I do this, this way, when I zoom in or out, it will be like that I don't want to do is issue. So I will say here H. So its size old-time depends on our screen. It looks pretty good. So I will say right minus 200 pixels. So it will translate like this. I'm gonna say animation, mountain. Five seconds, linear and infinite. Keyframes, MAN, to transform, translate X minus Tarzan pixels, of course. Okay, let's change this to a 1000 pixels because it's not enough for our mountain Go. But as you can see, there is our flowing here. I will highlight this. Perfect. Let's zoom this out from this in. It looks pretty project code. So it was our final project. I hope it was benefits for you and I hope you enjoy it. As you can see, there is no limit of imagination. After this course, I hope you will create your own animations, your own projects, and your portfolio will be more colorful, more attractive. And that's all I think. If you have any questions, feel free to ask. You can mail me as Chrome here and I wish the best for your future. So goodbye.