1 00:00:00,460 --> 00:00:05,560 OK, so before we get started with what Animation's actually are, let's first set up our work environment. 2 00:00:05,660 --> 00:00:07,750 I just created a. folder called Animation's. 3 00:00:07,750 --> 00:00:14,460 You can e-mail whatever you want and everything here going create or index that e-mail and our style 4 00:00:14,470 --> 00:00:15,190 of says. 5 00:00:20,380 --> 00:00:26,710 Care to start with a boilerplate and within the hour body, I'm going to start with the header tag. 6 00:00:29,010 --> 00:00:30,480 And this will include. 7 00:00:31,470 --> 00:00:41,030 So this is the include sign a each one and then each one will be succeeded by a paragraph that they 8 00:00:41,070 --> 00:00:41,390 will go. 9 00:00:41,970 --> 00:00:43,560 Now, I'm just going to tap into your thoughts. 10 00:00:43,600 --> 00:00:46,020 This is a animation. 11 00:00:49,690 --> 00:00:54,430 And for paragraph, you have any meet your Cyesis. 12 00:00:58,930 --> 00:01:04,930 I kept typing so badly and it made U.S. assets. 13 00:01:07,140 --> 00:01:14,790 OK, after I had a section, I'm going to create five section tags and each of them step in section 14 00:01:15,810 --> 00:01:20,340 and each of them will have a class of animation section. 15 00:01:23,300 --> 00:01:30,440 Now, I'm going to multiply this by five and actually wanting to hear something. 16 00:01:32,660 --> 00:01:46,420 Yeah, I want the H to end it within here, so this would include the H two plus a div and just step 17 00:01:46,430 --> 00:01:52,510 in there because I need to give it a class later on and we need to set this entire thing into parentheses. 18 00:01:52,520 --> 00:01:54,050 I want everything to be multiplied. 19 00:01:54,860 --> 00:01:57,920 And let's go to the top five again and then we go. 20 00:01:59,890 --> 00:02:10,750 Now let's go to our first H-2 and demitasse stylist, no problem, selecter, first to this is select 21 00:02:10,750 --> 00:02:14,660 all the tools by holding down it. 22 00:02:14,690 --> 00:02:15,400 Do something else. 23 00:02:15,880 --> 00:02:16,910 Going to hold on. 24 00:02:17,350 --> 00:02:18,120 It's on the mark. 25 00:02:18,140 --> 00:02:18,970 You should hold on. 26 00:02:19,940 --> 00:02:27,740 Option and all the other pieces, I believe it's called, and just click through your tools for holding 27 00:02:27,740 --> 00:02:37,450 down this option or alt key and this was select within each H2, it will now be able to type in style. 28 00:02:37,690 --> 00:02:42,950 And I shouldn't do this, but I want to do it in r HMO style, font size. 29 00:02:44,910 --> 00:02:46,640 I'm going to go with free. 30 00:02:49,150 --> 00:02:55,740 Can't that's all just hanging on for our each tooth now within our toes and all with it, not between 31 00:02:55,740 --> 00:03:00,480 all of them, but with between the first two, we're going to type animation using colors. 32 00:03:03,760 --> 00:03:10,860 You are seeing colors, that's got a second one, and this would be the animation direction portion. 33 00:03:15,540 --> 00:03:19,410 This direction, No one dash rection. 34 00:03:22,450 --> 00:03:24,970 Then we'll have an amazing speed curve. 35 00:03:32,250 --> 00:03:39,320 I went to this way of doing this, and we want to keep switching up how I create my term as an orderly, 36 00:03:39,690 --> 00:03:41,570 but it was to constantly learn something. 37 00:03:41,580 --> 00:03:42,810 So you saw all this. 38 00:03:44,330 --> 00:03:50,130 All this includes and plus signs and so forth and so on actually have a separate course on this called 39 00:03:50,130 --> 00:03:51,130 which to the code. 40 00:03:51,320 --> 00:03:52,610 All you need to know about it. 41 00:03:53,060 --> 00:04:01,100 And and I'm teaching them very basic, from basic to advanced method of creating things and actually 42 00:04:01,100 --> 00:04:06,410 using visuals to record the really effective methods and shortening your your developer speed. 43 00:04:06,830 --> 00:04:12,250 So this would be speed curve, a key. 44 00:04:12,720 --> 00:04:13,100 Not now. 45 00:04:13,100 --> 00:04:18,110 Let's to for fourth H to an animation film called. 46 00:04:25,900 --> 00:04:28,930 And the last one will be animation shorthand properties. 47 00:04:41,910 --> 00:04:43,020 This property. 48 00:04:49,120 --> 00:04:56,140 Okay, so basically that's it for each of analyzation tasks isn't going to just to reset here for our 49 00:04:56,200 --> 00:04:57,670 margins and spending. 50 00:04:59,250 --> 00:05:05,910 Al Jazeera and petting zoo and also reset the border box. 51 00:05:07,290 --> 00:05:09,990 What about the box sizing toward the box? 52 00:05:12,760 --> 00:05:23,650 To Brown Oh, man, so box sizing and board the box, OK, and two things before we get started with 53 00:05:24,190 --> 00:05:33,220 the animation itself, I want to take my Heather tag and give it the height of actually with width of 54 00:05:33,220 --> 00:05:34,420 600 pixels. 55 00:05:37,050 --> 00:05:48,630 A position relative margin auto when the center is in the center of the page displayed as Flex and I 56 00:05:48,630 --> 00:05:58,190 would have your flex rep, then we'd actually rep and text the line center. 57 00:05:58,890 --> 00:05:59,310 OK. 58 00:05:59,760 --> 00:06:07,950 And I also told to that if you put a height of 95, you put height in order to have it. 59 00:06:08,850 --> 00:06:11,180 Just a few seconds, I'm going to show you what just happened. 60 00:06:11,550 --> 00:06:16,650 And I'm going to take the animation animation section class. 61 00:06:18,590 --> 00:06:26,740 Basically, I want to have each individual section in its own on its own page, so to say, basically, 62 00:06:26,740 --> 00:06:34,060 I want to have each information on one on one viewport this so displayed facilities block. 63 00:06:38,860 --> 00:06:43,570 Then I'm going to set the height for each section to 100 viewport heights. 64 00:06:47,130 --> 00:06:47,730 And. 65 00:06:49,250 --> 00:06:53,240 Actually, I want to wait to be a bit larger, so 700 pixels. 66 00:06:55,210 --> 00:06:58,240 Look into the Texas center and 67 00:07:00,730 --> 00:07:02,670 said Mojado, and that's it. 68 00:07:07,860 --> 00:07:13,700 In case this is it for saying it's also opening up because we didn't see anything until now. 69 00:07:14,810 --> 00:07:21,730 So, yeah, I think I forgot to link up my style cable back in here. 70 00:07:22,770 --> 00:07:25,030 And link up our style. 71 00:07:26,010 --> 00:07:29,220 There we go, save it and now we have it here. 72 00:07:30,510 --> 00:07:33,000 OK, so that's pretty much it for this video. 73 00:07:33,630 --> 00:07:36,300 The next one, I will start learning about the animation's.