Learn how to use simple CSS animations and create your own animated animal | Norbert Nagy | Skillshare

Learn how to use simple CSS animations and create your own animated animal

Norbert Nagy, building a better web

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (1h 16m)
    • 1. Intro

    • 2. Environment Setup

    • 3. Simple CSS Transitions

    • 4. CSS Border Transition - Part 1

    • 5. CSS Border Transition - Part 2

    • 6. CSS Transform Intro

    • 7. CSS Transform - Part 1

    • 8. CSS Transform - Part 2

    • 9. CSS Transform - Part 3


About This Class

Have you ever seen a web animation and then thought 'this is amazing, but it must be to complex for me to do'... well I'm here to tell you that it’s not!

CSS animations, transitions and transforms are essential in every creative UI developer’s toolkit.
They help you grab your users attention and if used correctly they will make any web page fun and interactive.

In this course, I will help you master CSS animations, transitions and transforms and also show you some tips and tricks to better utilize your HTML structure an achieve effects.

With a hands-on approach, together, we will learn some amazing techniques which will allow you to express all your creativity and build much larger web experiences and hopefully fuel your imagination to keep on exploring and building a better, more beautiful web one line of code at a time.

For starters we will look at the CSS transition property, what it is ? and how it can change and add interactivity to the HTML elements.

From here we move on to CSS transforms and open the doors to many creative options for moving elements around the page, scaling and rotating them via the transform functions.

Then we will have some fun using all the properties and functions to build some animated figures and eye-catching animations.


1. Intro: by everyone. It's nobody here, Thank you for joining my course. This is the 1st 1 that I ever created. So I hope you will enjoy and give him some feedback after a throughout this course, I'm going to be teaching you help to use and really, really simple CSS properties, like a transition to create some amazing but in effect. And then we're going to be moving into using the CSS Transform property, which allows us to create some more interactive animations. And we're going to be doing this by creating and animated animal. By the end of this course, I hope you will have enough confidence to go ahead and create your animal and share it with everyone. Feel how amazing it looks. So without foot it a do. Let's join me the next section. We're going to be setting up our environment. I could see there 2. Environment Setup: before we move on to the first lesson, I want to take some time to show you the environment that I'm going to be using. This is to help you understand where things are and make it easier to follow. I'm going to be using code sandbox travel scores. This is a browser integrated code editor. It allows me to have Deco display to you and as well as a preview off the code in the browser. At the moment, you can see that I have index HTM and open. This is the file over. All of our markup is going to be written. But since this course is about CSS, we need to have a few more things before we can move on. Let's go ahead and add a new folder in the Root. People call this folder Assets in this folder with the lad file called Styles That Success . Now this is the CSS file where all of our styles are going to be, and these will be the too far that we will use throughout the course. Since we now have our new file created, we need to link it to our documents, for you need to tell our documents that that's the fire that it needs to use the baby due. This is percent link. It's a style sheet that you're linking. So this is the relation of the document to the starship than a truck. People tell it'll despair. The starship is such it is on their assets stars that CSS. And one more thing we're gonna say that a type of this is text forward slash CSS. All of this tells the browser how to handle this fire. Now we have this file now Link. But there is nothing in our CSS in order to make sure that the stars are being applied correctly. Let's add some styles. This will be some just some utility styles that will help our elements be positioned nicely on the page. So let's go ahead and at comment quickly just to separate the stars from the actual styles of the lessons. And we will say this is environment set up start. I'm gonna grab that best that's safe. And now in here, I want to define first of fulsome stars for the body tag, and one style I want to add is displayed. Great. Make sure that this is a grave. I want to make it 100% height of the browsers. I'm going to say hi is 100 window fights. V Age sense were being the heights, which is going to make sure that this is 100% for the browser. And let's align old text to the center. Must I had saved and refresh. They see that this is now nicely centered. Also, let's add a few months styles for this container element that we have to go ahead and grab this container class driven to use center this element both horizontally and vertically. Since container is a child of the body, we can now say a line cell center, and we can also say justify itself center. Once we saved this, we consider now our text is nicely centered on Page two. This will help positioned elements that you're styling, and that's it for the set up. I will see you in the first lesson 3. Simple CSS Transitions : in the previous session. We have set upon environment. We now have our style and their index file, and it's time to go ahead. And I tried to play around with some transitions. So we're gonna get rid off this title and instead of it, I want you to create some buttons in the button. People say over me, Exclamation mark And they actually want four of them For Andi, that's That's a space between them and they go. We now have four buttons and cover me. This is how they look now. If you got into our stars, there are a few more things that I just want to add into this apartment set up. First of all, the container I wanted to be had displayed grid as well, because I want to separate his buttons out. I don't want them to sit together on the same line. Then I'm going to add another style, which would be great templates, columns. With this, we can define how many columns we want and all I want is to columns which are exactly the same way. It is gonna be one fragment by fragment, and the fragments give their two of them. They will calculate that that needs to be 50% by 50%. If we saved that and a fresh, we see that they're now centered and they're kind of into columns, but they don't look too good. Let's go ahead and apply some styling to these buttons. But first revealed had another comment here saying that this is actually less than one and someone, and this is simple CSS transitions. Okay, okay, So first of all, we have the buttons that we're going to style directly to button tag. What do we want? We want these buttons to be positioned relatively, which I'm going to explain to you later on in this lesson. Why that is, we won't apply some border, Let's say to pick cells solid border and we want 11. Nicer blew it and we used in the last. So let's see zero 83 city. This should be a nice shade of blue. Perfect. Let's go ahead and copy that blue color because we really use it for the text columnist. Now these buttons are really small. They're not really nice. Let's let's have some padding to them and depending we're gonna add, will be 20 pixels stop bottom at 40 pixels on the left and right. And because we don't want them to stick together, we would have five big. So, margin, just to give them a bit of spacing between them. No. One more thing. I think this fund size it's way too small That said that to 18. Pick something That should be cool. Now, this is the last time hope this kind of buttons set up. We have to add a transition. Now we won't see what this does for now, but I'm gonna walk you through what This means That the 1st 1st the transition attribute takes three parameters. The 1st 1 is what do you want to transition? We can say we want to transition to color. We want to transition the border. But in our case, we're just set it to transition everything. So any, if any values of changing. Even if the padding changes, they will be transition. Now, how long are they going to be? Transitioned is defined by the next set reboot, which we will set to 0.3 seconds. So 300 milliseconds, That should be enough. And he can see it right here we get a couple off transition animations or easings, so called easings, but we can use the built in easings bone so we're gonna use. He's in and out, which means it's going to transition on hover. And it's going to transition also as your mouth leaves and that is it for the buttons. Now let's move on and create a style for the first button there. First of all, let me show you how this looks like. We have four nice and big buttons, which we can now start. So the first time they were going to do is the simplest of demo. So we're gonna call this button one and hover because we only want this to happen on hover . So what we want to happen, we want on hover. Let's say we want to change the background from fight to the same blue and we want to change the color from blue to write because all of them transition. So let's see how that's gonna look. So we will change the color of the text to White, and they will change down background color. I'm going to move this slightly down so you can see what I'm typing background color. They will just choose to blue that we have to find right here. Somebody hit, save fresh and let's see how that looks like. It looks like nothing because we did not apply our class. So let's grab a class selected. You gotta take next page and add class to button number one, and now we get a nice transition. You can see how it changes. It's a really subtle, subtle animation, but it can still enhance the upside. Your building. Now let's do something a little bit more interesting for Button number two. So we're gonna do. They tend to and we will create an after selector on this button. But then, after select Aries, it is an element it doesn't actually exist in your markup, but because you have a button, you can create these soldiers selectors like that. They were gonna come before and after this element, and that's why they're conveniently called. And after or before, it doesn't really matter. This could be a before. I just preferred in this case to use and after Element because this element doesn't actually exist and it doesn't have any content. You always have to define something like this so you can say it has content. It's empty. We don't want any text in eight. It's just gonna be like this. And next thing we wanted to be displayed block. In order to be able to set some size to this, some putting some Britain height it needs to be a block element. The position of this element. It's great to be absolute. Now this is where previously defined relative comes into play. So every time when you have two elements, you have a button, which is apparent element and the after selector, which is a child element. The child. The element can be absolutely positioned against a relative element. So if this element did not have the relative position, they would be positioning this one against the entire document said. This little position relative helps us isolate this style to the specific bottom. So let's go ahead and tell it to be a top zero. Let's also tell it to be left zero okay, and they will tell it to have a great off 100% but the height of zero, meaning that it won't actually show up just yet. Also because now this is different element. The transition no longer applies, so we need to go ahead and set the transition. This element, let's see. Did we miss a few more things? Of course, we need to set the SET index of this to minus one, because when this shows up, we wanted to sit behind the text because remember, this is no longer the background color on the bottom. This is a separate element. We wanted to be behind the text and let's set the background color. That said, the background color of this to the same blue that we already have defined previously to distribute enough. Now what we need to do is set a hover for this button to I think I said Hover for it now the harbor for button to what do we want to say? We want the background color to actually be transparent. This is a pretty find, variably confusing success. Make sure that it's transparent, it doesn't have any collar white anything, and we also want to change the color to light and spell. So let's go ahead big. Our second button applied a button to class. It's refresh and let's just go back So we have this after selector, which is going to be, ah, height of zero. So what we need to do is that one more class gonna be Harvard. The button we want to get after selector and want to has have it. Hide said. 200%. Remember, this is going to transition because we said the transition here. So we should be able now to go ahead and see how this looks pretty need. It's a little bit more, more kind of open animation than previous one. It's still really subtle and it still won't affect your website too much. But it's going to be that nice touch to make it look slightly better. Let's do one more version of this one. So pretty like very much like it. So let's go. But in tree, let's actually see what we can reuse. Yes, so we can reuse most of this styling for the next one. So what I'm going to do is just say that button three after should get same starting from here. I also want but sort of button three over to get the same styling here. Now, this is where I want to change something because button three hover after should go a bit different. Okay, Also, also, we want to change. Where should we put this starts there It makes more sense. So we want to modify this from slightly. So we're gonna go ahead and say But entry after has a bit. 0% has high 200% ready. False were overriding thes two values which is flipping them around on. The positioning can stay exactly the same now on hunger instead of animating behind, they will actually be in emerging what, 200% and I'm sure district ticket. So let's go back here. We will apply the but entry class with her first is and let's see if we were successful in creating another animation critical. Uh, let's do something slightly slightly different for the fourth button again. So we'll go ahead just already applied this, But four since you're here, have we need some styles for button? For once again, we're going to be reusing all of this, but for I keep in mind, you could not repeat this class that it could be just one simple modified plus. But in order to keep things separating for you to see what I'm actually doing. I think it's easier to keep it like this for now. So we're gonna also reuse the hover effect of this one. So we can also say, But let's just go with him. I can change it before we're going to do that as loud. No, we need to modify the position off, but four. After what we're gonna do with this one, we're gonna tell it to be left 50% and the height can be 100% of it can be zero. This is gonna work. No, we need to also apply. Some understands. So what should happen when we hover over the fourth button? What should happen to this after it should be with 100? That's true. But we also wanted to move left zero because originally, it's going to sit in the middle of the button. Let's see how this effect looks like. So we have these facts already. You can see the enemy nicely, and this is the fort effect. It starts in the middle, is gonna animate itself to left at the same time as it's becoming 100% wide. And it gives us this need effect So this is one of the simplest ways to use a cease his transition to achieve something nice and the patient really appealing. Looking, grab, uses attention. Hope you enjoy this lessons and I'm going to see you in the next one. But we're going to try to apply some slightly more complex transitions to take our skills to the next level. 4. CSS Border Transition - Part 1: Hello, everyone. Welcome to this next lesson in this lesson. I want to show you a neat trick how you can create animated borders now, Borders have a limitation that if you're animating them, you have to animate the whole border at once. So I came up with a way how you can create your own custom borders and animate them separately to achieve some really cool effects. So first of all, a conceded the market is the same. We're gonna only have two buttons for for this one, the only things that I changed into CSS are defining these two custom variables chases variables, which are two blue colors. And then I use those two colors to create a leaner grade in from top left to bottom. Right. Just have this nice effect. And I also applied an RGB a background color for the buttons. So they're actually white with 50% off a pass iti just to have a little bit nicer effect. And what we're going to be doing is we're gonna be creating white borders, but we're gonna be animating them. We're gonna be animating them separately one by one to achieve some really cool effects duties for two buttons. So in order for us to get started, let's go here and define core rather ad a span inside of each button. Now, the reason for addict this is because we want to have a separate border for every side of the button. And the way we're gonna achieve that is that we're gonna take after and before selectors off a button to define the top and the bottom border. Then we're gonna do and after and before selector on the span itself. And that's going to serve as our left and right border. Can you see how this is going to help us achieve on a really interesting effect? So let's go back to our styles and define a couple of things which will be applied for both buttons. I'm going to start them here. First of all, he added, the two spans, they're in line elements, but in our case, we want them to be displayed block because we want to be able to enemy their height. If they're in line way, we can't really do this easily. Then we're gonna go button and let's select good before and after Hellman's. Now I remember from before. These elements don't show up on a page if they don't have content and because we don't actually want continuing them just passing an empty string, which is enough at the writ of these two who is setting to zero now? As I said, the button before and after it will be serving the top and bottom off days. We don't want them to be visible originally, So they were said that Richard zero But David service our borders, which will be to pick self borders just like we had originally. And they will be off a height too big. So for this to now, similarly can go ahead and copied is and we can add a space and span. Now, this is the definition for the span which will be left and right border instead. Off having a bit here, the way it is going to be two pixels by the height is going to be zero because they have a different orientations. We want a bit to be two pixels, but the height zero for down because you don't want to see them now. A couple more things that we need to define here is position absolute because they have to be absolutely positioned against the relative parent, which is the button. Let's also defined some transition on them, make a shorter 0.2 and also because we want them to be white belts, a background color. His wife, not this would be applied to vote vault empties. So this is what we need to set up for both button and span. There's a few more things that we need to do, which is defined a behavior wolf off. What happens on Holler. Sorry, so but Homer before brought him over after and we will do the same four two spans, right? In this case, we have the animating the weight, which was set 0 200%. And in this case with animating the height, which zero again? 200%. This it for now in the next section will be defining the actual, uh, stars for these buttons. Let me just show what happens right now, he said, if we define some borders in a little around position, but it's starting to looks like something. So in the next one next video, I'm gonna walk you true defying styles for these two buttons 5. CSS Border Transition - Part 2: in two previous lesson. We set up some border, some custom borders that you can see. It looked like this on our buttons. Now, in this section, we're going to be positioning those correctly to achieve the desired effect. So let's start yourself good. But in one first of all, take it before and after off the button itself. And after that, we're gonna be doing the same thing 42 spans that we have now, First of all, on button one before we want to define a slight delay so we could mature. Wendy's animation start 0.2 seconds on under two spends. We just want to say that the transition dilation zero seconds. No, for these 0.2 seconds zero seconds, you have to be explicit and say seconds. There is another elements like, for example, height, which is in pig cells. You don't necessarily have to fasten their attributes next to, so let's 10 go to. But in one before. So what do we want to do it bottom on before but on one before is the actual talk top border, so we can say that we want this one to be top cereal reality left. Um, actually, right. See what was going to be We want to set for this one? No, the next one that we want to set is but one after the after is our bottom order. Why don't I think after and bottom will be zero on other Not going to be left zeros Rather is going to start from left serial. The other one's got got tired from top, right? Okay, so we have the top and bottom border now defined. That's cos too so speed things up. And then I'm broke, too at that. Just pounds it found now for the spines which had left and right. They're going to start right before just going to be left. Syria at ticked up zero now that after bond is going to be right, zero and bottom zero. Okay, so they moved him around slightly. So let's see how this button looks at the moment. That already looks really cool. I think that's that's even enough so we can see that it's really nice effect. So that's step number one. Now I want to go to butter number two, and there's something slightly different in this so button to before before battle to before. We're going to say that isn't left 50% of it is something similar, like the last step off. I'm the first lesson and then bottom. It's going to be zero then. That's too the same thing bought this time. We're going to do the span. So this and so, uh, for about duty after we do the button after first, Now that after is going to be again left 50%. But instead of bottom, it's going to be see, it's going to Let's change this one to top, actually, so before is the top after is the bottom just to make it consistent with the previous two. Okay, how did we have dose set up? There's too much things you want to do here for this second button. We don't want to have any delay, so just to find out and we want to transition duration to be slightly longer. So we're gonna say it's opened four seconds. Have you will apply the same exact style for boat. Now we can grab his had another set of rules. Beach will be for the spans, of course. So now we have disbands. Let's just see what we wanted to be dispatched. The 1st 1 which is the before, needs to be left. Syria. It needs to be top 50 percent to be in the correct position. Not after one needs to be. Let me see. Right, Ciro. And he wanted to be on top. It's up. Uh, it's a 50 50% right that's gonna be consistent with under this side. And the last thing that we want to do now is to define but to over there before also the same time. But after and for damn, begin say, left is just cereal. I'll do the same for our to Spence. But for the spans, we will say talk is Syria and hopefully goddess ride should acquire cool. So let's check it for the 1st 1 They still how it just is it waas and a 2nd 1 We have this nice expanding from the center orf each site Spiegel. So this is how you can create custom CSS animated borders by using transition only. I know it took some copy basing, but I hope you enjoyed it and that you understand how to manipulate them. There's loads of different configurations you can create by defining delays, changing integration. So feel free to go ahead and play around, and I will see you in the next lesson. 6. CSS Transform Intro: okay, just before we jump into the lesson about transform, I wanted to go to a couple of things to explain to you what the terms are that you're going to be using it and how they work. So what does it CSS transferring property Do what this does is it allows you to visually manipulate an element by skewing rotating, translating for scaling it. That's going toe each one of these four and just give a little bit more context. So when we're using scale, scale will affect the size often element. This also applies to the font size padding height. Weight off that element is valves. We need to keep this in mind now. Securing an element can be done by the export of I access what this will do. It will tilt an element to the left or to the right is this way. To understand this is like turning a rectangle into a program. Then translate is simply moving an element sideways up or down on the page. Wild rotate, rotate element clockwise from its current position, and negative values could be used to rotate the element anti clockwise. So these are all the things that we need to know in the next lessons, and I don't see you in the next video 7. CSS Transform - Part 1: Hey, everyone, welcome to the section. We're going to be focusing on the CSS transformed property. There are going to be quite a lot of moving parts here, so I'm going to take it nice and easy, separating every element into its own video and then, in the end, going to be building something in this case that something's going to be an animal which will be part off your final project. I want you to build your own animal, so let's go ahead and see what I have for to set up. As you can see, I created a nice little stand called Stand on It to stand for a cat. And let me just show you how that looks like in the coat. First of all, I defined three new colors a brown color of being color and the teal color. The brown is not at you, but you can see that being and tail is right here. Further than that, I set up some sizes for a container to contain this little stand. Try to find a stand pretty easy. Just position Absolute added being colored for the stand itself and then, um using the soldier of selector after to define the actual poor rich understand is and then I'm just using box trato to kind of generate this effect. So right now, let's go and create our first animation using the CSS transformed property. What I want you to do for days is first of all, that separate these out, and the next step we're gonna do is create. And you did. Okay, so So we have on you, Dave. Let's call this year to get. And then we're gonna open up that Dave again, and inside of it, we will create something. Another deal. Coldest. If the body. Okay, so now we have our cats and its body. We need to go ahead and at some stars for this, it's go back to our CSS file. First of all, it's just to find a cat way will give it a bit 110 pixels on. We will give it the heights. Something less than half of bad luck. 50 pixels. Truth to it? No, the background quality cat. It's going to be you get nothing for your cat even actually positioned this that absolutely on that. Say, actually, before we do that, we need to create the body, and then we will see how weakened position that. So let's create the body. The body is going to be exactly the scene just over then. Andrea, thank you to find a background car for body off cat. And for days we were using had color. That I find it should and is the brown color brown cats position of cats is going to be absolute right. Next thing that be I need to do is actually see how this butter looks like and you can see we have a body here. It's not really in a good position. So this is why I wanted to go had here in the cat itself. Let's say talk really moved up. Exactly the height of cats. It's 56 cells. Let's see how that looks like they go, that's better. But let's center it on this. So let's just move. Got a living to rights data. That cat is now in the center, off the stand. I'm just gonna go ahead and add said index off minus month. This will take effect later once you start adding the animations. Um okay, so that doesn't look really much like a cat's body. But thank you, Hank on. Let's do something. Let's do Ford there, So right use. So we're going to make this look a little bit more like a cat by adding border radius in 100 excels corporatist. Last line. Move it to the left side. Same exacting and they go way have now our body off the cat and that is the first step. But the first past transformed, popular I want to show you, is the CSS, um scale. So there's let's see how we can use scale to make this cat look like it's breeding. Okay, so they were gonna do this. It's really using at key frames to create an animation. And let's call this information greeting, okay, because this is gonna be our cath brooding now. There's gonna be fun, a lot of key frames here because I wanted this to look like sleeping and breathing. So we're gonna start with a couple of steps that's do step at five big cells more than 5 15 That's a 20 weeks. Those five on 45. Let's add a few percent and percent shoot Now what this does it gives us more control over how our information should behave over time and what we want to do as I said, we're going to be using transform bills they're going to be is in this case, we're gonna be scaling by y access. And let's see, for starters, Cat's gonna be size born, which is what you're seeing at the moment, then making copies on. Actually, that's just had another step. Here. It's 10% now. A 10% our cat is going to breed in and it's going to go. 1.15 fits on the sides at 15%. We're gonna go back to one, then 20%. Let's say 1 25 Gonna be deeper. Breath 10 back to one on Dalits 45. Let's go back to 1.15 for 50%. They can go back, Teoh one on for 55 max Syrian finish So they go redefined some scaring and we created our animation freezing or key frames. You can see that we did not pass in any sort of and a soda length here, but I've been assured how are we going to do that? So we're gonna go back to the body now because we need to tell it to use the new animation that we created. How do we do this way? Start by animation. We'll hit. Enter here so you can see the options that we can Passing name, duration, timing, function, delay, alteration, con direction And feel more We can get rid of the last two. We're not gonna be using doors for timing function. We won't be using anything and everyone using too late Now the name The name is new information that we just treated here reading situation. Never going to make this Catholic like it's sleeping. So it should be reading quite slowly. So there's there's something like 10 actually visit to five seconds. They don't need the timing, function, situation count. We want this to be an ongoing animations. I'm gonna start typing and it's gonna for infinite is what's going to be It saved his Let me hit Refresh To see how this is looking head, As you can see, um, our cat is now breathing. Obviously it's missing a few more pieces, but that's gonna be the next videos. So I think that's it for this lesson. I'm going to separate the next one to lesson number two of this section and I'll see you back there were going to be building at the head of the way. 8. CSS Transform - Part 2: Hello, everybody. Welcome back to the second part of the CSS transformed property lesson Be the previous lesson. We have set up this little stand with the cat's body, which appears to be breeding okay before we continue. I want to make one slight change to the position of the cat. And let's just say that we want to move it instead of 50 pixels to arrive. We want to do only 25 because we want to have enough space for the head of the cat. The first thing we're going to do now is we're going to define head, so the hat is going to be part of the cat. You just at Dave Class called Head. That's good. Now the head is going to have a few elements. First of all, it's going to have one day, which is going to be. I think it's nose just like that. And then it is going to have whiskers and what we're going to do now. It's less, uh, close. That Triska container is going to have to This goes Okay, so let me go Copy this one. We're gonna have to in each whisker container and done. Wait to have two of them. But this just Linus properly in Dent. Perfect. So we're going to have a head. There's going to be a nose in the middle and there's gonna be two whiskers on the left to whiskers on the right. Let's go now and apply some styles to these elements. So first thing we need to start with the head. Let's make the head show up so that we know it's in the correct position and that everything is all right with. So let's start by defining some bits scientific cells, height, we will say that 35 Big sense. Sorry. One more thing. It's going to be, of course, position. Absolutely. Let's keep that. Let's keep that has first style. Here we have that's had a background color and produce your own views harder to have to find. And it's the same color as body around. And for now, let's just see what this Parliament six so we can see that it is here. We just have to position it correctly, so we want to position in the following tell you're gonna count in eight 50% and then we were removed and fix ups. Let's see how that looks like. It is exactly the bottom off the cat's body, which is correct. And then we just want to pull it to the left. That's him minus 46 cells, and that is the perfect position. We're just going to leave it there. Obviously, that had is looking a little bit square. So let's apply some border radius took it and border radius. I will do 89%. 80 big cells save. That works. Amazing. That's how we wanted. We just wanted on both sides. So we're going to do for the right radius as well. And they go. We have had a cat and that's it. That's it for the head. Let's move on to the nose. The nose should be quite simple again. Is going to be a position absolute for this element, then bottom. We want this want to be, um, slightly above the bottom of the body of a pig cells. They need to define the width and height. Of course. Wait. Five big cells fight five big Selves. For the sake of simplicity. It's going to be around nose so we can save board their radius, and it's going to be for all sides to save 50%. Let's add some background color on. We can use the variable that we would have to find, which is to think, Let's have a look how this is sitting on the page. We can see that now we have to nose right there now it's not exactly the correct positions . What we need to do is we need to push it from the left side by 30 big cells. That's enough. Perfect. This is not in the center had anything exactly where we wanted to be. So that is it for the knows. What's left now is to at the whiskers and then also at some animations to the whiskers. So let's move on to Whisker Pena. One thing I need to make sure is just that I am actually helping naming something. Grab that make sure your dad is the scene, and it is so that is good. Now, for the risk of container, we will do something like position, perhaps in it. Then we will say that the risk for container he's with 20 pixels with a height baby had and thats position. It's to five pixels from the bottom and so 56 cells from the left. What we're going to be doing is going to transform origin and to tell so that we can use our transform in the correct way. We will move our origin to the right side so that our animation starts there on for now. This should be enough. But we won't see anything until we actually define a whisker. So what will our whisker be? Position is going to be absolutely Okay, Steak position is going to be absolutely said. Then let's say the top position is going to be zero and the wit off it is going to be 100% off the risk of container. And then let's use border to make these whiskers because we're gonna be finding Zahra 0.5 pixels. Sorry, Border. And, um, if the color is going to be very bold, we have the teal color, which would be perfect for our whiskers. Again, we need to do transform origin. And this time we were just use 100% 0 to put it into the right position so that that should be okay. Let's try to see what what happens now? OK, we have the whisker. Now, if you remember correctly here we can see there be defined four of them. But currently they're all in the same exact position. So we need to do something about death. So that's some act. The last child. The fiscal, which is the last child that this is going to sound like the Fisker, which is the last child which is this one. And the last one here is well, so for days ones we will apply some additional styles. We will say that top position for them is cereal and we will say that we will apply a transform. In this case, it will be rotate. We will rotate these ones, but minus 20 decrees. But of course we have to rotate the 1st 1 as well. Let's rotate here too. But these ones we were just voted by 10 degrees. I am so as you can see, one of them's clockwise that always counterclockwise. So let's see if that worked Perfect. We now have our whiskers, but still there is one issue. We have the left whisker and the right whisker, and at the moment they're overlapping. So what we need to do now? This target the last whisker container. Let's go ahead and do that risk container risk. Er, container, little do and child because this is not the last child there. And we would just say to wear looking for the 2nd 1 and we will apply some additional styles for this one. First of all, we will do a transformer and rotate, and they're just related by 180 degrees completely to the opposite side. Let's look at this. As you can see, we have the other risk or now not in the right position, but almost there. So let's move it a little bit up from revolt. Um, 2 10 pixels instead of five. Shake it up. Almost looking good. Let's just push it. 30 pixels from the left sits from the other side of the nose. Death enough to be too much. So let's who but the 10 instead. There we go. That's not enough. Then we could have 20. That is almost looking good. So I'm just gonna change that slightly to maybe 18. Um, I'm quite quite happy with that. Now. One more thing that I need to do here is maybe person slightly higher from the bottom tow line them That looks good. Now what? I don't like his dis left oneness kind of sitting too far away from the nose. So let me see if I can, which is slightly closer. Um, that's that's a little bit too much. Let's go with seven. That looks OK. And then also from the bottom I think we can do for big cells that looks much nicer. So they're now sitting in the correct positions. We had to play around 11 for the positioning bad eighties looking good. Now there is two more things that we need to define. And these are the animations for the whiskers. Not to make things simpler, scroll up to the top. Copy the breeding animation that we did. So what we're going to do is we're going to use the same exactly frames because we want to match the move off the whiskers to the breeding of the cat. So we're going to coffee and face that and let's rename this and it's clips named this left Miska and go ahead and copied again and named that one right whisker. Okay, so now we have to is to play around with this 11 because instead of the scale in this lesson, we're using rotates so they don't want skin here. We want to rotate and let's start by just zero for for just that whisker coffee that's gonna be using that phone and this farmer just zero decrees. Then we will move to minus five degrees. We don't want to move it too much, just just slightly, slightly enough. See some nice animations now the next phone instead of five. Let's just go back to zero because I'm actually trying to this random myself. You can. You can use different values but less driving these. Let's make it stay on zero for a while. Then on Let's move it to maybe like 10 in the opposite direction. Now 10. That's moving back to minus five. And let's finish it on, um, 10. That is there something similar for the right whisker. But remember, the right scurries turned completely to the different to the other side so we can start with 00 On this side would be 100 and 80 then much more rich. 275 no, actually list of 190 from 190. Let's go to 18 and let's to. Okay, so we had 80. 90 80 75. Let's go back to 97. Born 19 Dan, I want heating. And then just to white five and 1 75 Good. So one PT five and then one 70 far We made animations for whiskers. Now, about the last remaining stuff is to apply them. So let's apply them. And they were gonna be applying them to the whisper containers. So let's start with the 1st 1 So ever say animation, then the animation is going to be left skirt. This is the animation named the Left Whisker. We want this animation to last same amount, same bank as the cats for breeding. We want this to go in vote directions and we wanted to be infinite as well. Cooking this Let's go into the other side. And then for this one, we made the right whisker Exactly the same. Everything stays the same. So once you have fresh, we should see the whiskers now moving as the cat is breathing. No, And I think I'm happy that now, in the last session, we're going to be adding some ears to the cat and of course, a tail really used some translate to move the tail and that will conclude the animated cat that we're making. So join me in the next session. We're going to finish this animation. See you there. 9. CSS Transform - Part 3: all right. Here we are in the final section where we're going to finish this cat by adding some ears and a tail. Now, before we get started. Pretty styling. Let's go and find our structure. First of all, really adding two years. So what? We are going to be going to class. You just happy face this fun now? One important thing because he added two more elements before the whiskers. They have to go back and make us life change. If I refresh now, you will see what I mean. We're losing one of our whiskers because it's defined as a second child. It doesn't exist anymore. So now we will change that before because we had it to extra elements and they go, we have it back. That is no. And the tail tail is going to be, you know, that's do class. Now. This is a tricky part. We're going to be adding sections of the tail true creative class, and we will be having seven sections and they would all be staggered within each other. So this is size. I mean, state, that's one, 23 607. Never just kind of remind him like this. I'm in this empty space. Now this will make sense. When we started starting, you will see how this is going to. We're going to have animations which are staggering and then making a tale that Biggles. So this is OK for now way we'll start with the ears and then move on to detain at the very end. So that said, first class of you there are a couple of things here. First for position could be absolute. Dan. That's it. Position, Physician. Let's start with six pictures of him. I have to just slightly them from the top were to say, my support vixens. For now, we might have to adjust this Indian again, but for now, now that Bates um the rich and hide for years which is zero going to be zero because we will be using border to define it. Move it in the following way. So we'll say border and let's say border and it's do border top. No, that's just reported laughed. Border left is going to be 12 pick cells. It's gonna be a solid, and it's going to be transparent. You're trying to make little triangle, so if you know. Do order. Right. I need something to help pick cells solid on. Transparent as well. That's good. Now let's to Ford. Uh, and border button is going to be 20 pixels salad, and they want to match the color of the cat, which we already noticed Brown like, So let's see what this gives us. We can see we have a near here. Okay, We actually have both of them at the same position. So now we have to move the other one. Do they? Have you gonna select this funnies instead of the again childless? There's something like a year muss. Yeah. So what this selector is going to do is going to find an ear selected. It comes after. And your selector, it's only going to select the 2nd 1 You know, case and open it to do here is gonna move it. Health takes us to the top, and we're gonna appreciate 30. Picks us from the left. And that should be fine for now. Let's refresh this and I have two years. I'll X cured. I think to go on that I don't like it's probably this se eight cents. No, that's not at the top one instead of minus four. Let's do mine. Six. Just to have it. Okay, instead of minor sports, just do minus five. Yeah. Yeah, that looks fine. Okay, so we have our years. Let's quickly defined animations for years on. We can copy again to keep friends are safe from the right skirt, for example. That's the name. This front to rights year. Okay, now the ranked abusing rotate again. Let's play around with these key friends aside from 0 to 5, then we can go to say 25. Um, 30. Remember, these are a random members, so you can do your own numbers, but I'm just gonna try to slowly staggered him up, too. 100%. Now, this is going to be our right year on. Let's start defining something like minus 20 um, minus six degrees. Let's go down to minus 15 miners. I want to keep this in the negative. Let's do another minus 15 then my 30. Keep it in my study for a while, and then we will go to minus 15 and finish it off with minus six. That should be it for the right. Here we go over the same one. It's just another rotate said for the last one to see how that's gonna look like, um, that should be capital now for the left Here, we want all of them to actually be with, um, sets. I'm just gonna spect all of these. That said to all of them on and the stick, your that's better. Now for that, this one will be going with I understand on, Let's say, actually this to like I minus 16. My have 19 19. It's good 30 1919 and I should just make some nine. And then in the end, it's going to be 16. So that's read animations for us. Let's apply these animations first full. We have our first year, which should be left here. Now this one is going to be information it's going to be and the name for animation. Of course, I might have made a mistake here, so let me just switch these two around right on on, and then I'm going to show, like left here. That's going information for this one. It's going to be 12 seconds boat. And of course you want just to be infinite saying that No, the 2nd 1 It's going to be right here. Let's see how this looks like, Maybe apply. You can see we get some slightly movement in two years, and I think that that looks good. We don't have to change anything of that. Let's quickly move on to defining the fail. I know the day looks a little bit complicated, but all of this markup, but trust me sometimes markup can help you reduce the amount of CSS you need to write, which is going to happen in this case number. Show you right now. So for the tail, they said, we have a tail container that said some stars for that 1st 1st awful position is absolute. That's good. They say. Write is Syria. We're going to be all aerated it right, but the cat's body. Then you will say bottom is 13 pixels. We'll see if it needs to be changed. Minor starting excels. So for now, this is what we have here never going into the tail section. That they're section will be a position absolute, just like everything else. The heart of the tail section is going to be 30 big cells and a bit with 14 fictions. no positioning bottom. Um I understand vixens. Let's see what else we need to do here. Position from right this. Well, it's the state zero. No honest work there. Right? Five fictions. Next repeat. Good. Of course. Uh, okay, this is missing a radius. That's why it's complaining. Of course. Water bottom, right radius. That's correct. And then that's defined background color. You want this one to stay the same brown we have for a cat and that just set this set index to be zero mushroom kisses percent necessary to be able to see. Now this sort of tree comes in for selecting all of days one by one. And the baby we're going to do this is the same time we lose this symbol. And then there people say, Take this is going to select a tale that is a direct child of detail. And it will then flight the next starts, first of all right, and it will be 100% it 14 big sense and let's just do transform or Jane to the left. We want to any me now for their but that's do left radios and they will say 20 picks as of 20 think cells. Now let's complete that because border Bolton right will be exactly the same. And then it was just a border. So right on border took right radius. Put 40 pixels for this one. Okay, let's see how this looks. Now when we refresh the page and we have a tail perfect. Now, the last remaining step is to animate that they're nicely to make this look much, much better. So for detail, once again, I'm going to copy the's key frames have called this the tail animation. And instead of starting with zero, I'm going to start with five somebody to remove this 1st 1 No, I just started five. Then I'm gonna go to 10. 15 20 can five. Let's say 10 45 and 15. I just make sure that I have a number. So five tenses Dean 2025 45 50. But said another one because I moved one. That's going to be 50. Okay, now this is also going to be a rotation for detailed. Let's just make sure that we are rotating in the correct wait. So to be one. But they Yes, we won't just simple rotate for detaining you don't need this sets now so we can get rid of this sets. Okay. Holding develop. That's on here. Let's select all of them and just remove. Does that Okay? And the rotation is going to be following. They start with zero, go to 10. Go to minus five. Then that's just something more like 30 minus two Next, 10 10 and, uh, minus 60 minus five. Let's finish with 10 now, of course, for the tail sections, we need to apply this animation. So information is going to be the daily communication. We want this animation to last five seconds, like all the other ones. Once, no direction and infinite. And they go, It seems like I have made a slight mistake getting great one bracket. They got saved up. Let's see what we got now. Okay, I think that that's cute. Cat is big wing its tail. We have used rotate and scale to create this animation. Of course, we could have used translates to move the tail, but it would have had it would have been much more difficult to get the desired effect. Andi, I think this one looks good. I would invite you now to go ahead and do the course project, which is creating your own animal. I'm going to drop in a couple of hints off the animals that you can create. I went for the cat. You can create something different, like an owl or maybe a pig. We should be really interesting because you can re use are not really easy to create shapes to create amazing animations. I hope you enjoy the scores. This is the first course that I've created. So all of the field back, it's really welcome. And I hope that he would join me for the next courses in the future. Thank you for doing