CSS Animations Part 3 - A Tutorial

CSS Animations

Woo Hoo! You made it to the final part!* Congratulations! If you have not already, check out Part 1 and Part 2!

Let’s get coding!


Today, we are going to create a new project. This is going to be a minimal version of the Web Starter.

In index.html remove everything in the <body> section.
In style.css remove everything. That’s right: EVERYTHING
And you can also delete everything in index.js.

Great! We just finished setting up!

Now, we need a heading for our website… oh wait! I forgot to tell you what we are making.

Today, we are making a website with a header, subheader, 3 paragraphs, and of course, CSS animations!


First, we need our HTML. In the <body> section, put just the H1 header:

<h1 id="header">Welcome!</h1>

This is simply just a header at the top of our website.
Now below that, we need a subheader.

<h3 id="subheader">This is my website!</h3>

Now, we are going to have a spacer. This is just going to be a small, thin line that separates the headers from the text.

<div class="spacer"></div>

Now we need 3 paragraphs. These are going to fade in individually:

<p id="paragraph1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p id="paragraph2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p id="paragraph3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

Now, this is all the html in the <body> section:

<h1 id="header">Welcome!</h1>
<h3 id="subheader">This is my website!</h3>
<div class="spacer"></div>
<p id="paragraph1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p id="paragraph2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
<p id="paragraph3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

Yay! We are done! with the HTML! Now it is time for the CSS.

First, we are going to format ALL the text.

body{
     font-family: sans-serif; /* Makes the font a nice simple font */
     text-align: center; /* Makes all the text move to the center of the line it is in. */
}

Since all of our website content is in the <body> area, this affects our entire website. Now we are going to create our spacer.

.spacer { /* We use a period because we are calling it by class */
     width: 100%; /* Runs across the entire screen */
     height: 1px; /* Makes the line very thin */
     background-color: lightgray; /* Makes the line a nice light color */
}

Yay! All good with that. Now we need to define our animation.
Note: I know I said we were going to use precents on this, but I changed my mind, but still read precents. It is key to making other animations.
This is going to be the same animation as we used in part one:

@keyframes fade-in{
     from {
          opacity: 0;
     }
     to {
          opacity: 1;
     }
}

Now, animating!

So what is the animation-delay property? This delay says how long will the code wait before it executes the animation.

We need to give each element the animation and their own animation delay. This is a long block of code that I will just give you:

#header {
  animation: fade-in 3s ease-in-out forwards; 
  animation-delay: 0s; /* Delay the animation start for header */
}

#subheader {
  animation: fade-in 3s ease-in-out forwards;
  animation-delay: 0.5s; /* Delay the animation start for subheader */
}

#paragraph1 {
  animation: fade-in 3s ease-in-out forwards;
  animation-delay: 1s; /* Delay the animation start for paragraph1 */
}

#paragraph2 {
  animation: fade-in 3s ease-in-out forwards;
  animation-delay: 1.5s; /* Delay the animation start for paragraph2 */
}

#paragraph3 {
  animation: fade-in 3s ease-in-out forwards;
  animation-delay: 2s; /* Delay the animation start for paragraph3 */
}

Now this is just very repetitive and you may be thinking Wow, why not just give the whole body the animation with the delays separate and I thought that to, but it turns out that if you do that it acts as if the body is animated and not all the other elements, and if you want to try that out for yourself, be my guest.

Waitttt… hold on a minute… this is ALL THE CODE! YAY! WE DID IT!

Now I thought about giving all the code at the end, but that would be very wasteful of my space so instead, look at the finished product here!

Congrats! This finishes the series on CSS Animations… or does it?

*I am not completely sure. If I think/learn of something new regarding this topic, then I will make a tutorial about it. In the meantime, if you have any questions about it, or if you want me to teach something more, than comment them below!

Thanks for reading!

3 Likes

do you know how sites do it so that the animation starts when you get to that part of the site? like for doing an animation like this farther down on a page

Ahh! Check out https://michalsnik.github.io/aos/. This is a really easy tool to do that!

ok that’s a lotta js thanks