Scroll down animated icons

$('<section id="sec-2"></section>').prependTo('.banners-content.body-banners');

<p><a href="#sec-2" id="scroll_down_button"> <span class="scroll-down">&nbsp;</span> </a></p>

.scroll-down {
height: 50px;
width: 30px;
border: 2px solid #fff;
position: absolute;
left: 50%;
bottom: 20px;
border-radius: 50px;
cursor: pointer;
}
.scroll-down::before,
.scroll-down::after {
content: "";
position: absolute;
top: 20%;
left: 50%;
height: 10px;
width: 10px;
transform: translate(-50%, -100%) rotate(45deg);
border: 2px solid #fff;
border-top: transparent;
border-left: transparent;
animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
top: 30%;
animation-delay: 0.3s;
/* animation: scroll-down 1s ease-in-out infinite; */
}

@keyframes scroll-down {
0% {
/* top:20%; */
opacity: 0;
}
30% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
top: 90%;
opacity: 0;
}
}
html {
scroll-behavior: smooth;
}