OK, so before we get started with what Animation's actually are, let's first set up our work environment.
I just created a. folder called Animation's.
You can e-mail whatever you want and everything here going create or index that e-mail and our style
of says.
Care to start with a boilerplate and within the hour body, I'm going to start with the header tag.
And this will include.
So this is the include sign a each one and then each one will be succeeded by a paragraph that they
will go.
Now, I'm just going to tap into your thoughts.
This is a animation.
And for paragraph, you have any meet your Cyesis.
I kept typing so badly and it made U.S. assets.
OK, after I had a section, I'm going to create five section tags and each of them step in section
and each of them will have a class of animation section.
Now, I'm going to multiply this by five and actually wanting to hear something.
Yeah, I want the H to end it within here, so this would include the H two plus a div and just step
in there because I need to give it a class later on and we need to set this entire thing into parentheses.
I want everything to be multiplied.
And let's go to the top five again and then we go.
Now let's go to our first H-2 and demitasse stylist, no problem, selecter, first to this is select
all the tools by holding down it.
Do something else.
Going to hold on.
It's on the mark.
You should hold on.
Option and all the other pieces, I believe it's called, and just click through your tools for holding
down this option or alt key and this was select within each H2, it will now be able to type in style.
And I shouldn't do this, but I want to do it in r HMO style, font size.
I'm going to go with free.
Can't that's all just hanging on for our each tooth now within our toes and all with it, not between
all of them, but with between the first two, we're going to type animation using colors.
You are seeing colors, that's got a second one, and this would be the animation direction portion.
This direction, No one dash rection.
Then we'll have an amazing speed curve.
I went to this way of doing this, and we want to keep switching up how I create my term as an orderly,
but it was to constantly learn something.
So you saw all this.
All this includes and plus signs and so forth and so on actually have a separate course on this called
which to the code.
All you need to know about it.
And and I'm teaching them very basic, from basic to advanced method of creating things and actually
using visuals to record the really effective methods and shortening your your developer speed.
So this would be speed curve, a key.
Not now.
Let's to for fourth H to an animation film called.
And the last one will be animation shorthand properties.
This property.
Okay, so basically that's it for each of analyzation tasks isn't going to just to reset here for our
margins and spending.
Al Jazeera and petting zoo and also reset the border box.
What about the box sizing toward the box?
To Brown Oh, man, so box sizing and board the box, OK, and two things before we get started with
the animation itself, I want to take my Heather tag and give it the height of actually with width of
600 pixels.
A position relative margin auto when the center is in the center of the page displayed as Flex and I
would have your flex rep, then we'd actually rep and text the line center.
OK.
And I also told to that if you put a height of 95, you put height in order to have it.
Just a few seconds, I'm going to show you what just happened.
And I'm going to take the animation animation section class.
Basically, I want to have each individual section in its own on its own page, so to say, basically,
I want to have each information on one on one viewport this so displayed facilities block.
Then I'm going to set the height for each section to 100 viewport heights.
And.
Actually, I want to wait to be a bit larger, so 700 pixels.
Look into the Texas center and
said Mojado, and that's it.
In case this is it for saying it's also opening up because we didn't see anything until now.
So, yeah, I think I forgot to link up my style cable back in here.
And link up our style.
There we go, save it and now we have it here.
OK, so that's pretty much it for this video.
The next one, I will start learning about the animation's.