Create a scroll indicator arrow that animates with a fade effect.

by davidxmartins

HTML

<div class="scroll-arrow">
                <span></span>
  
</div>

CSS

body{
  margin: 0;
  padding: 0;
  background-color: #000;
}
.scroll-arrow{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.scroll-arrow span{
    display: block;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    margin: 5%;
    animation: animate 2s infinite;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-10px,-10px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(10px,10px);
    }
}