In today's video, we're gonna take a look at CSS animations and how we can use them to make our pages load in dynamically.

So as soon as our page loads, all the different content from our page is going to have a smooth animation onto the page.

This is something you can implement into your own portfolio sites, and it's really going to make your portfolio pop compared to all other portfolios.

So let's get started now way.

Welcome back to Webb have simplified my name's Kyle, and my job is to simplify the Web for you so you can start building your dream project sooner.

So if that sounds like something you'd be interested in, make sure you subscribe to my channel for more videos just like this one.

And now to get started with this video, I have visual studio code open to a completely blank folder, and on the right, I have the finished version of our product loaded up so we can see what we're trying to do.

And if I come over here and refresh the page, you can see that our navigation and the elements inside of it smoothly animated in as well as our content or page also smoothly animates in.

So it's really a nice easy transition from the completely white page toe all of our content instead of just being instant and has these nice, smooth animations which we're going to build using CSS.

But before we can jump into the CSS, we first need to get started with our HTML.

So it's created index dot html file and inside of this, if we just hit exclamation point and hit enter and it is going to automatically generate the boilerplate HTML code for us and the first thing we want to do is just link our style sheet, which is gonna be called stiles dot CSS.

And let's create that now styles don't CSS.

And now let's go back to our HTML and inside of here.

The first thing we need is this navigation you see on the right side, so we could just say Who wants to be inside of our header and we wanna have a knave inside of here.

And inside this map, we're gonna use an A nordeste and inside the on order of most, we're gonna have list elements, and each one is going to have its own anchor tag for our link and for our example.

Our page are links don't actually go anywhere when we click on them.

So we're just gonna use here the pound symbol to indicate that it goes nowhere.

And we're gonna have a home link.

As Bose hopes, we're gonna have an about Linc and lastly it Contact Link.

And now, after a header, we're gonna need our main section here.

So we're gonna put main inside of here, and this is going to be a section which is gonna have some articles.

And each one of those articles is going to have a heading.

In our case, we have main story and then inside of a P tag is going to be the content of our article.

And to generate all of this boilerplate code over here, this boy would play Lauren if send text, you type warm and then a number, for example 50.

It'll generate 50 just random words for you, and we can copy of this article.

Put another article instead of here.

This'll one's gonna be called another story.

And let's change our text instead of here to be, for example, 25 words and now we can save that.

And we want to open this up using live server.

So if you don't already have the live server extension installed for visual studio code, you can do that.

And then once you have that done, you can right click on your file, click open with Live Server, and it's going to open up over here.

And as you can see, we have our header section as well as our two main sections in the middle.

And that's all the HTML for our project so we can move on to styling our site using CSS.

So inside of our CSS, the very first thing I want to do is remove the padding on the body or the margin.

I mean, this is just default margin that is on the body.

So if we remove this, it just pushes everything to the edge of our screen.

Next we can work on styling are never because that's gonna be with the bulk of our style and will be.

The first thing we want to do is give it a background color so we could just come in here.

We wanted to be RGB and we wanna have a value of 0 61 92 And that's gonna be that nice, dark blue color.

As you can see here, we also want to change the color of all of our text to white.

And then we can move on to our actual ul.

And the UL has some default margin on it.

So we're just gonna remove that and we're gonna save this to suit.

We have, as you can see so far, everything's pushed up like we like it.

But we also want to display these in a row instead of vertically so we can use display, flex and justify content center.

And that's going to align these up right next to each other and put them in the center.

And now so you can see that our text color is not actually propagating.

We have this purple color instead of our white.

So if we just select the A tags inside of our now, we can just change the color here to inherit just like this.

And it's going to actually inherit that color from our parent which has the color set toe Wait.

Also, we want to select our allies and what we want to do is we want to set the list style to none, and this is going to remove those dots.

So if we say that you can see those dots are gone and for our nev, we can change the text decoration to none, and that will remove the underlying underneath of our links.

Also, let's add a little bit of space.

In between are elements so we can say a padding of 10 pixels.

We say that you can see it pushes a way from each other just a little bit.

We're also going to use a margin here and we're gonna use zero on the top and bottom and 10 pixels on the weapon, right?

Just to give us a little bit more space between our links, and I think that looks really good.

The last thing we need to do is just give our allies a slight hover effect so we can select them, say hover, and all we want to do is change the background color.

We want this to be completely white.

So just like this, and if we put two more Hexi decimal digits after this, it's going to be opacity, So we wanted to be mostly transparent.

And if we say that you see that we get this mostly transparent white box that appears over each one of our elements, which is exactly what we want Now the very, very last thing we have to do is to add just a little bit of padding around.

Our main section will save 30 pixels, and there we go.

That's gonna push our content in the middle.

So it's not quite right up against the edge.

And that's really all the styling we need to get our page looking good.

Now all the rest of our styling is going to be for animations, and the way we're gonna make our page animate in on load is by using CSS animations combined with key frames.

So let's start with one of the easier animations, which is to animate our nev.

So what we want to do is we want to say we want an animation.

The first tag is going to be the name of our animation, what is called this knave load, and we actually need to create that animation by using key frames, and we can say knave, load and inside of here.

We can put key frames at different percentages.

So, for example, 0% is going to be what it looks like at the very beginning.

And 100% is going to be what the animation looks like when it's finished.

So at the very beginning, we want our nab our to be off the screen right at the top.

So we can just say transform, translate in the UAE, and we wanna translate negative 100%.

So, essentially the entire height of the NAB are we wanna push up by its entire height, negative 100%.

Then inside of the finish we want to do is we want to set this to zero.

We wanted to not be translated at all.

Now, if we say that, you can see nothing's actually happening and that's because we need to tell her animation how long it should take.

In our case, we use 300 milliseconds.

So about 1/3 of a second and now if we say that you see it animates in, we could say that again.

You can see it slowly drops in.

We can also use what's called easing effects.

So this is the timing.

And we can say, for example, we want this to be easy in.

Now, if we save it, you see, it'll be a little slower at the beginning and it'll speed up the end where we could do ease out and we'll be a little bit still over at the end for our example.

I'm just gonna use these in because I think it gives it a really nice look.

Also, if you remember from the previous example where I showed you the end product, you noticed that art labels here for our links actually started their animation as soon as this animation ended.

And that's because you can pass 1/4 property here, which is the delay.

Now, if we save this, it'll take 400 milliseconds before animation begins.

But, for example, this we want to start immediately, so we're not gonna add a delay.

But we want the rest of our animations to delay by 300 milliseconds and to make it so that we don't need to copy paste 300 milliseconds everywhere.

We could just create a variable, which is gonna be called knave load time.

I'm really going to set that 300 milliseconds, and now we can use that variable inside of here Now have load time and you can see it works just the same as before.

But now we have a variable that we can use in the rest of our application.

And if you're not familiar with CSS variables, I have an entire video walking through them in death.

So make sure you check that out in the cards or in the description below.

The next thing I want to work on animating is going to be our links.

And if you remember our left link animated from the left are right.

Link animated from the right, and our middle link just kind of grew.

It's scaled from nothing all the way up to its full of sighs.

So we're gonna start by just doing the scaling portion, because that's going to be fairly straightforward.

We want to do this on our ally elements, so we want to create an animation which is going to be knave link load and like in the other example, as you saw, I did everything inside of one animation property.

In this example.

I'm actually going to break this out into individual properties.

So we have our animation name, which is just this first property here animation name.

And the reason I'm breaking this out into individual properties instead of one big animation property is that way inside of our Children.

So, for example, are knave ally first child thistles going to be what this left side one is going to do?

This way we actually have.

It's that we can override just the name of our animation toe have a completely different animation without having to override all of the other properties.

So the next thing we need is going to be our duration.

So instead of here, we're gonna put animation duration and again, we're gonna make a variable for this because we want our content inside of our page to animate after our header section is done.

So let's just say I have link load time and we're gonna set this to 500 milliseconds just so it'll take a little bit longer and now we can put this inside of here.

So we just access that variable and set that as our animation duration.

Here we have our animation timing function so we can just come down here animation, timing, function.

And in this case, we're just going to do.

He's in.

I think that'll look pretty good.

And we want to do the delay.

So animation delay message is going to be the entire length of our knave load time.

So now let's actually create this knave a link load.

We'll just copy these key frames and change this to knave link load.

And inside here, we want to change our scale property.

So we're gonna change our scale, which is going to start at zero, and it's going to end that one because we wanted to be 100% but I want to add a little bit of a bounce effect.

So we're gonna say maybe, for example, at 90% the transforms scale is going to actually be 1.1.

So this is 100 and 10% so it's actually going to scale up a little bit bigger than it will be and then result back down.

It'll give it a really cool look.

So now if we say that you're gonna notice immediately.

One problem.

The animation looks good, but you can see that our home about and contact link are actually showing on the page and then animated in.

And that's because when you actually need to change our transform scale in our ally, so by default it will always be a scale of zero.

Now, if we say that, you see it animates in, but then it completely disappears.

And that's because it's resorting back to this scale animation here.

So it's resorting back to transform scale.

It's set to, in order to get around that we can actually change our animation film mode, and we want to set this to forwards.

Essentially, what that means is that all of the properties at 100% of our animation are going to be what our animation, our element, is actually saved at, because right now the way our animation works is it just goes back to the default value of our ally, which is zero.

But we wanted to stay at whatever this is, which is 100%.

So now if we say that, you can see that animate in perfectly and they stay completely hidden until the animation starts, which is exactly what we want, and that's why we have to specify what we want.

It to look like before the animation starts and make sure it takes the value of the animation at the end as its final resting value.

Instead of resorting back to this transform here now, inside of our first child, all we need to do is just over right.

This name, property, we're gonna say, knave, first Link load, and we're just gonna copy this normal link load and change it to our first link.

And what we're gonna do is actually change the transform.

But we want to change the ex transform, and we're gonna set it here too negative, 1000%.

That way it's going to be completely off the side of our screen, and it's not going to get in the way at all Next.

After that, we could come into our 90% and we can change this to be, for example, 50%.