Animated Down Arrow in CSS

This code snippet showcases a simple yet eye-catching animated down arrow created using HTML and CSS. The arrow is designed to serve as a scroll prompt, providing a visual cue to users that there is more content below to be scrolled.

The arrow is placed at the bottom of the page and animates using CSS keyframes to create a bouncing effect, drawing attention to its presence.

The core CSS functionalities responsible for the animation include ‘opacity’ and ‘bounce’ keyframes, cleverly rotating and translating the arrow to produce the desired visual effect. Integrating this animated down arrow into your web projects can enhance user experience by guiding them to explore further content effortlessly.

How to Create Animated Down Arrow Css

1. Create the HTML structure for down arrow as follows:

<div class="scroll-prompt" scroll-prompt="" ng-show="showPrompt" style="opacity: 1;">
    <div class="scroll-prompt-arrow-container">
        <div class="scroll-prompt-arrow"><div></div></div>
        <div class="scroll-prompt-arrow"><div></div></div>
    </div>
</div>

2. Style the arrow using the following CSS styles:

* {
  box-sizing: border-box;
}

body {
  background: black;
}

.scroll-prompt {
  position: absolute;
  z-index: 998;
  bottom: -80px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 160px;
}
.scroll-prompt .scroll-prompt-arrow-container {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -18px;
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.scroll-prompt .scroll-prompt-arrow {
  -webkit-animation-name: opacity;
          animation-name: opacity;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.scroll-prompt .scroll-prompt-arrow:last-child {
  animation-direction: reverse;
  margin-top: -6px;
}
.scroll-prompt .scroll-prompt-arrow > div {
  width: 36px;
  height: 36px;
  border-right: 8px solid #bebebe;
  border-bottom: 8px solid #bebebe;
  transform: rotate(45deg) translateZ(1px);
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.2;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.6;
  }
  70% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.1;
  }
  20% {
    opacity: 0.2;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.5;
  }
  60% {
    opacity: 0.6;
  }
  70% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes bounce {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(3px);
  }
  20% {
    transform: translateY(6px);
  }
  30% {
    transform: translateY(9px);
  }
  40% {
    transform: translateY(12px);
  }
  50% {
    transform: translateY(15px);
  }
  60% {
    transform: translateY(18px);
  }
  70% {
    transform: translateY(21px);
  }
  80% {
    transform: translateY(24px);
  }
  90% {
    transform: translateY(27px);
  }
  100% {
    transform: translateY(30px);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(3px);
  }
  20% {
    transform: translateY(6px);
  }
  30% {
    transform: translateY(9px);
  }
  40% {
    transform: translateY(12px);
  }
  50% {
    transform: translateY(15px);
  }
  60% {
    transform: translateY(18px);
  }
  70% {
    transform: translateY(21px);
  }
  80% {
    transform: translateY(24px);
  }
  90% {
    transform: translateY(27px);
  }


  100% {
    transform: translateY(30px);
  }
}
.cd__main {
    background: black !important;
    align-items: center;
    height: 82vh;
    display: flex;
    width: 100%;}

That’s all! hopefully, you have successfully created an animated aown arrow. If you have any questions or suggestions, feel free to comment below.