HTML / SCSS Mouse wheel animation icon - https://jsfiddle.net/pgruszka/1ndzyhst/

mousewheel-icon.scss

.mousewheel-icon {
    display: inline-block;
    height: 38px;
    width: 22px;
    z-index: 10;
    border: 1px solid #333;
    border-radius: 16px;

    .wheel {
        position: relative;
        border-radius: 50%;
        background: #333;
        width: 3px;
        height: 6px;
        top: 3px;
        margin-left: auto;
        margin-right: auto;

        animation-name: mousewheel;
        animation-duration: 1.3s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-play-state: running;
    }

    &.white {
        border-color: #fff;

        .wheel {
            background: #fff;
        }
    }
}

@keyframes mousewheel {
    0% {
        top: 4px;
        opacity: 0;
    }
    30% {
        top: 10px;
        opacity: 1;
    }
    70% {
        top: 15px;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

mousewheel.html

<div class="mousewheel-icon">
    <div class="wheel"></div>
</div>