Up next in 10
How To Animate Page Loading With CSS
4K views
Feb 7, 2024
"How To Animate Page Loading With CSS" is an instructional video demonstrating how to create visually appealing loading animations for web pages using CSS (Cascading Style Sheets). In the video, viewers are guided through the process of designing and implementing CSS animations that activate when a page is loading, providing users with a seamless and engaging experience. The tutorial covers essential CSS animation concepts such as keyframes, transitions, and timing functions, allowing viewers to customize the loading animations to suit their design preferences. By following clear demonstrations and explanations, viewers can learn how to enhance user experience by incorporating dynamic loading animations into their web projects without relying on JavaScript. Whether you're a beginner or an experienced web developer, this tutorial offers valuable insights into leveraging CSS for creating captivating page loading animations.
View Video Transcript
0:00
Hello everyone, in today's video, we're going to take a look at CSS animations
0:04
and how we can use them to make our pages load in dynamically
0:09
So as soon as our page loads, all the different content from our page is going to have a smooth
0:14
animation onto the page. This is something you can implement into your own portfolio sites, and it's really going to make
0:20
your portfolio pop compared to all other portfolios. So let's get started now
0:29
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you so you can start building your
0:36
dream projects sooner. So if that sounds like something you'd be interested in, make sure you subscribe to my channel
0:42
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
0:49
folder, and on the right, I have the finished version of our product loaded up so we can
0:53
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
0:59
inside of it, smoothly animate in, as well as our content and our page also smoothly animates in
1:05
So it's really a nice easing transition from the completely white page to all of our content
1:10
instead of just being instant. It has these nice smooth animations, which we're going to build using CSS
1:16
But before we can jump into the CSS, we first need to get started with our HTML
1:20
So it's created index.html file. And inside of this, if we just hit exclamation point and hit enter, Emmett is going to automatically
1:28
generate the boilerplate HTML code for us. And the first thing we want to do is just link our style sheet, which is going to be called styles.ciss
1:36
And let's create that now, styles.css. And now let's go back to our HTML
1:42
And inside of here, the first thing we need is this navigation you see on the right side
1:46
So we can just say Education, we want this to be inside of our header, and we want to have
1:50
a nav inside of here. And inside this nav we're going to use an unordered list
1:55
And inside the unordered list, we're going to have list elements. and each one is going to have its own anchor tag for our link
2:02
And for our example, our page, our links don't actually go anywhere when we click on them
2:06
So we're just going to use here the pound symbol to indicate that it goes nowhere
2:10
And we're going to have a home link as well as, oops, we're going to have an about link
2:15
and lastly, a contact link. And now after our header, we're going to need our main section here
2:22
So we're going to put main inside of here, and this is going to be a section, which is going
2:26
have some articles, and each one of those articles is going to have a heading
2:30
In our case we have main story, and then inside of a p-tag is going to be the content
2:35
of our article. And to generate all of this boilerplate code over here, this boilerplate Lorum-Ipsen
2:41
text, if you type Lorum and then a number, for example, 50, it'll generate 50 just random
2:46
words for you. And we can copy this article, put another article instead of here
2:52
This one's going to be called another story, and let's change our text inside of here
2:56
to be, for example, 25 words. And now we can save that
3:00
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
3:07
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
3:13
And as you can see, we have our header section, as well as our two main sections in the middle
3:18
And that's all the HTML for our project. So we can move on to styling our site using CSS
3:23
So inside of our CSS, the very first thing I would have, I want to do is remove the padding on the body or the margin I mean
3:30
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
3:36
Next we can work on styling our nav because that's going to be where the bulk of our styling will be
3:40
The first thing we want to do is give it a background color. So we can just come in here, we want it to be RGB and we want to have a value of 0, 61
3:49
92, and that's going to be that nice dark blue color, as you can see here
3:53
We also want to change the color of all of our text to white. And then we can move on to our actual UL
3:58
And the UL has some default margin on it. So we're just going to remove that, and we're going to save this to see what we have
4:04
And 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
4:11
So we can use display flex and justify content center And that 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
4:22
we have this purple color instead of our white. So if we just select the A tags inside of our nav
4:27
we can just change the color here to inherit, just like this, and it's going to actually inherit that color
4:33
from our parent, which has the color set to white. Also, we want to select our LIs
4:39
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
4:45
are gone. And for our nav, we can change the text decoration to none and that will remove
4:51
the underline underneath of our links. Also, let's add a little bit of spacing between our elements
4:57
so we can say a padding of 10 pixels. If we save that, you can see it pushes them away from
5:01
each other just a little bit. We're also going to use a margin here and we're going to use 0 on
5:06
the top and bottom and 10 pixels on the left and right just to give us a little bit more space
5:10
between our links and I think that looks really good. The last thing we need to do is just give our LIs a slight hover effect so we can select
5:18
them say hover and all we want to do is change the background color
5:23
We want this to be completely white, so just like this and if we put two more hexadecimal
5:29
digits after this, it's going to be opacity, so we want it to be mostly transparent
5:33
And if we save that, you see that we get this mostly transparent white box that appears
5:38
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
5:46
We'll save 30 pixels, and there we go. That's going to push our content in the middle, so it's not quite right up against the edge
5:53
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
5:59
And the way we're going to make our page animate in on load is by using CSS animations combined with keyframes
6:06
So let's start with one of the easier animations, which is to animate our nav
6:10
So what we want to do is we want to say we want an animation
6:14
And the first tag is going to be the name of our animation. We'll just call this nav load
6:19
And we actually need to create that animation by using keyframes. And we can say nav load
6:25
And inside of here we can put keyframes at different percentages. So for example, 0% is going to be what it looks like at the very beginning
6:33
And 100% is going to be what the animation looks like when it's finished
6:37
So at the very beginning, we want our nav bar to be off the screen. right at the top
6:41
So we can just say transform, translate in the Y, and we want to translate negative 100%
6:48
So essentially the entire height of the nav bar, we want to push up by its entire height, negative 100%
6:54
Then inside of the finish, what we want to do is we want to set this to zero
6:58
We want it to not be translated at all. Now if we save that, you can see nothing's actually happening
7:03
and that's because we need to tell our animation how long it should take. In our case, we'll use 300 milliseconds
7:09
so about a third of a second, And now if we save that, you see it animates in
7:13
We can save that again, you can see it slowly drops in. We can also use what's called easing effects
7:18
So this is the timing, and we can say, for example, we want this to be ease in
7:22
Now if we save it, you see it'll be a little slower at the beginning and it'll speed up the end. Or we could do ease out, and it'll be a little bit slower at the end
7:30
For our example, I'm just going to use ease in because I think it gives it a really nice look
7:34
Also, if you remember from the previous example where I showed you the end product
7:38
You notice that our labels here for our links actually started their animation as soon as this animation ended
7:45
And that's because you can pass a fourth property here, which is the delay. Now if we save this, it'll take 400 milliseconds before our animation begins
7:54
But for our example, this we want to start immediately, so we're not going to add a delay
7:58
but we want the rest of our animations to delay by 300 milliseconds
8:02
And to make it so that we don't need to copy-paste 300 milliseconds everywhere
8:05
We can just create a variable which is going to be called nav load time, and we're just going
8:12
to set that to 300 milliseconds. And now we can use that variable inside of here, nav load time, and you can see it works just
8:20
the same as before, but now we have a variable that we can use in the rest of our application
8:25
And if you not familiar with CSS variables I have an entire video walking through them in depth so make sure you check that out in the cards or in the description linked 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 our right link animated from the right
8:42
and our middle link just kind of grew. It scaled from nothing all the way up to its full size
8:47
So we're going to start by just doing the scaling portion because that's going to be fairly straightforward
8:51
We want to do this on our LI elements. So we want to create an animation, which is going to be nav, link, load
8:58
And like in the other example, as you saw I did everything inside of one animation property
9:04
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
9:12
And the reason I'm breaking this out into individual properties instead of one big animation property is that way inside of our children
9:20
So for example, our nav, L.I. First Child. This is going to be what this left side one is going to do
9:27
This way we actually have it so that we can override just the name of our animation to have a completely different animation
9:33
without having to override all of the other properties. So the next thing we need is going to be our duration
9:38
So inside of here, we're going to put animation duration. And again, we're going to make a variable for this because we want our content inside of our page
9:46
to animate after our header section is done. So let's just say nav, link, load, time
9:55
And we're going to set this to 500 milliseconds, just to do. just so it'll take a little bit longer
10:00
And now we can put this inside of here. So we just access that variable and set that as our animation duration
10:06
Here we have our animation timing function. So we can just come down here, animation timing function
10:13
And in this case, we're just going to do ease in. I think that'll look pretty good
10:17
And we want to do the delay. So animation delay. And that is just going to be the entire length of our nav load time
10:24
So now let's actually create this nav link load. We'll just copy these keyframes and change this sylav-link load
10:32
And inside of here, we want to change our scale property. So we're going to change our scale, which is going to start at 0, and it's going to end at 1
10:41
because we want it to be 100%. But I want to add a little bit of a bounce effect
10:46
So we're going to say, maybe for example, at 90%, the Transform scale is going to actually
10:52
be 1.1. So this is 110%. So it's actually going to scale up a little bit bigger than it will be and then result back down
11:00
It'll give it a really cool look. So now if we say that, you're going to notice immediately one problem
11:05
The animation looks good, but you can see that our home, about, and contact link are actually
11:10
showing on the page and then animated in. And that's because we actually need to change our transform scale in our LI
11:17
So by default, it'll always be a scale of zero. Now if we say that, you see it animates in, but then it completely disappears
11:24
And that's because it's resorting back to the scale animation here. So it's resorting back to the transform scale it's set to
11:31
In order to get around that, we can actually change our animation fill mode
11:35
And we want to set this to forwards. Essentially what that means is that all of the properties at 100% of our animation are
11:42
going to be what our animation, our element, is actually saved at
11:46
Because right now, the way our animation works is it just goes back to the default value
11:50
of our LI, which is zero. But we want it to stay at whatever this is, which is
11:54
100%. So now if we save it, you can see they animate in perfectly, and they stay completely
12:00
hidden until the animation starts, which is exactly what we want. And that's why we had to specify
12:05
what we want it to look like before the animation starts, and make sure it takes the value
12:09
of the animation at the end as its final resting value instead of resorting back to this
12:14
transform here. Now inside of our first child, all we need to do is just overwrite this name
12:19
property. We're going to say nav first link load, and we're just going to copy you
12:24
this normal link load and change it to our first link. And what we're going to do is actually change the transform, but we want to change the X
12:32
transform, and we're going to set it here to negative 1,000%. That way it's going to be completely off the side of our screen, and it's not going to get
12:39
in the way at all. Next after that we can come into our 90 and we can change this to be for example 50 so it going to animate over itself just a little bit and then down here it going to animate back into itself at its resting position of 0 which is where
12:56
it normally will fall at. Now if we save that, you can see it's not at all working
13:01
And that's because we have our transform of a scale 0. We need to make sure our transform has a translate x, and it's going to be set to that negative
13:09
1,000 percent, that default value. Now if we save this, you can see it's still not working
13:15
And that's because I should have put Translate here. So this is Translate X instead of transform
13:21
And down here as well, we want to use Translate X instead of Transform X
13:25
Now if we say that, you see it animates in from the left side, which is great
13:29
Let's copy this and do the exact same thing. But for our last link, and we want it to start at positive 1,000
13:36
go to negative 50, and then all the way up here, we'll just copy this a little bit of code
13:41
and we want this to be the last child. child, we want it to start at positive 1,000, and of course the last link load animation
13:49
Now if you watch that, you can see that our two links are animating in from the sides, and
13:54
our about section is scaling in like we want it to. That looks really great so far, and now we're on to our final section, which is animated
14:00
in our header, as well as our paragraph tags. So let's get started by just selecting our H1 so we can animate our headers first
14:08
The way that this animation works is it's going to be completely transparent, as well as
14:13
is offset just a little bit, so it's going to fall into place while becoming fully opaque
14:18
so it's going to give it a really cool kind of loading transition. So the first thing we're
14:22
going to say is we want our animation. And of course, this animation is going to have a name
14:26
and we're just going to call this article load. And then we're also going to give it a duration
14:33
300 milliseconds, and we'll just say that this one is going to be ease in as well. And then lastly
14:38
we want to calculate how long it's going to take for this to load. And this is going to take
14:42
the nav load link time plus the nav link load time. So we can just create a article
14:50
load, delay, and we can set that to the calculation of this nav load time
14:58
So we want to get the variable of that, and we want to add it to our nav link load time
15:04
So make sure we got that in there. So essentially what we're doing is we're just adding 300 milliseconds
15:08
plus 500 milliseconds, so that way this section actually loads after our entire header
15:12
animation is done. So let's copy this down all the way down here, put that inside of a variable
15:19
and now we can create our article load. We need that all the way at the bottom here, keyframes
15:24
and we want to do it for article load, and inside of here we'll have our 0%, as well as our 100%
15:31
and what we want to do is we want to set our transform of our translate in the Y direction
15:38
We're going to set this to negative 20 pixels. That way it's just offset by just a little
15:42
little bit and the opacity to zero. And in our 100%, we can just copy this because we're going to do essentially the opposite
15:50
We're going to resort this back to zero and put the opacity to 1
15:54
Now if we load that, you can see it does that nice little animation. You can see it kind of loads in from the top and slowly animates itself in
16:01
But as you can see, the section is here all the way until the animation
16:05
So we need to do the same thing we did with these links where we changed the animation
16:09
fill mode to forward, just like that. We also want to change our default transform, translate y to negative 20 pixels, and we also
16:18
want to change here our opacity to be zero by default. Now if we say that, you can see the headers are no longer shown immediately and they're only
16:26
shown as soon as they're animated into the page. Now if we copy this, we can do essentially the exact same thing for the P tag, but we're
16:34
just going to add a little bit of time to our loading here. So we're going to say our delay is going to be our article load delay, plus let's say in
16:42
additional 200 milliseconds. It's just an arbitrary number you can use whatever you want
16:47
But now if we save that, you can see the header loads in, and then the content of that section
16:51
loads in right after the header is done loading. And that's all it takes to create page animations on load
16:58
If you enjoyed this video, make sure to check on my other videos, linked over here, and
17:01
subscribe to the channel for more videos just like this. Thank you very much for watching and have a good day
#Clip Art & Animated GIFs
#Flash-Based Entertainment
#Skins
# Themes & Wallpapers