svg animated arrows

by Korah Babu Varghese

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller1">
<path d="M16 1l-15 15h9v16h12v-16h9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller1">
<path d="M16 31l15-15h-9v-16h-12v16h-9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>

</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller2">
<path d="M1 16l15 15v-9h14v-12h-14v-9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="80" viewBox="0 0 32 32" class="scroller2">
<path d="M31 16l-15-15v9h-14v12h14v9z" fill="transparent" stroke="#ccc" stroke-width="3"></path>
</svg>

CSS

.scroller1 {
    -webkit-animation: updown 1s infinite;
    animation: updown 1s infinite;
}

.scroller2 {
    -webkit-animation: leftright 1s infinite;
    animation: leftright 1s infinite;
}


@keyframes updown {
    0% {
         -webkit-transform: translate(0, 5px);
        transform: translate(0, 5px);
        opacity:0;
        
    }
    50% {
     -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}



@keyframes leftright {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);

    }
    50% {
        -webkit-transform: translate(5px, 0);
        transform: translate(5px, 0);
        opacity:0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
          
    }
}