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

.arrow-left span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 3px solid #ff3140;
    border-left: 3px solid #ff3140;
   
    margin: -2px;
    animation: arrow-left 1s infinite;
    float: left;
}
 
.arrow-left span:nth-child(2){
    animation-delay: -0.1s;
}
.arrow-left span:nth-child(3){
    animation-delay: -0.2s;
}
@keyframes arrow-left {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-0px,-0px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(0px,0px);
    }
}