CSS Scroll Animation is a very useful animation to make users scroll down. Basically, this animation animates some down arrows to go down from up with a fade in and fade out effect.

Also, Read- Gradient Ring Loader using CSS

How to create CSS scroll animation?

In this tutorial, we will learn how to create this animation using CSS. I will try to explain every single line of the code.

Now, let’s break down this project into small easy tasks

  • Link Font Awesome icons CSS file via CDN
  • Create or Write 3 down arrow icons
  • Style the icons
  • Animate the icons

Linking of CSS files in HTML can be done with <link> tag.

Link tag – It is used to define the relationship between the current document and the external resource.

We will link the Font Awesome icons CSS file with CDN

CDN – A Content Delivery Network (CDN) is a group of servers distributed all over the globe geographically to provide fast delivery of internet content.

We can link it like below

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>

Here are the definitions of the above keywords

rel – relationship(rel) defines the type of relationship between the current document and the external document.

href – Hypertext Reference defines the link to an external document.

Create or Write 3 down arrow icons

Now, we will use 3 down arrows from the Font Awesome icons. We can group the icons inside a <div> tag

<div class="scroll">
  <div>
    <i class="fa-solid fa-chevron-down"></i>
  </div>
  <div>
    <i class="fa-solid fa-chevron-down"></i>
  </div>
  <div>
    <i class="fa-solid fa-chevron-down"></i>
  </div>
</div>

We can use Font Awesome icons using Font Awesome class inside an <i> tag. Find out more on Font Awesome website.

Style the icons

Next, we need to style our icons so they look good on our website.

.scroll > div {
  width: 50px;
  height: 40px;
  font-size: 50px;
  text-align: center;
  color: #fff;
}

Here we selected every div tag inside the scroll class div tag. Now, we can set the width, height, font size, and color of the icons.

Animate the icons

This is the most important part of this tutorial, we need to animate the icons.

We can do that by using keyframes in CSS

@keyframes scroll-down {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}

Here, we are setting the initial opacity to 0 and the initial Y position of every icon to -40 pixels.

Next, when the animation reaches 50% of its lifetime we set the opacity to 1, and then when it reaches 100% of its lifetime we set the opacity to 0, and the Y position to 40 pixels.

Now, we will set this animation to our icons using the animation property on them

.scroll > div {
  width: 50px;
  height: 40px;
  font-size: 50px;
  text-align: center;
  color: #000;
  animation: scroll-down 2s infinite; /* Here we used the animation property */
}

The animation property requires the name and time of the animation.

Our animation name is “scroll-down” animation time is 2 seconds, with that we want our animation to play infinitely so we set the animation count to infinite.

Finally, we want the second and third icons to move after some delay

.scroll > div:nth-child(2) {
  animation-delay: -0.1s;
}

.scroll > div:nth-child(3) {
  animation-delay: -0.2s;
}

Let’s understand the above code

nth-child(n) – This selector is used to select every nth child of its parent.

animation-delay – The animation-delay property defines the delay for the start of an animation.

We set the second and third icon’s animation delay to -0.1 seconds and -0.2 seconds respectively.

With that said we have our scroll-down animation.

The source code is available on Github.