SVG animated scroll icon

scroll-icon.md

<svg id="alg_mouse_home" xmlns="http://www.w3.org/2000/svg" width="20" height="40" viewBox="0 0 20 40">
<path class="alg_mouse_home_arrow" d="M16.7,32.3c-0.4-0.4-1-0.4-1.4,0L10,37.6l-5.3-5.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4c0,0,0,0,0,0l6,6c0.4,0.4,1,0.4,1.4,0l6-6C17.1,33.3,17.1,32.7,16.7,32.3z"></path>
<path class="alg_mouse_home_body" d="M10,2c4.4,0,8,3.6,8,8v10c0,4.4-3.6,8-8,8s-8-3.6-8-8V10C2,5.6,5.6,2,10,2 M10,0C4.5,0,0,4.5,0,10v10c0,5.5,4.5,10,10,10s10-4.5,10-10V10C20,4.5,15.5,0,10,0z M12,12V8c0-1.1-0.9-2-2-2l0,0C8.9,6,8,6.9,8,8v4c0,1.1,0.9,2,2,2l0,0C11.1,14,12,13.1,12,12z"></path>
</svg>

#alg_mouse_home .alg_mouse_home_arrow {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite
}

@keyframes bounce {
    0%,20%,50%,80%,100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(15px);
    }

    60% {
        transform: translateY(5px);
    }
}