Animated Scroll Icon

Note: requires Font Awesome library

HTML

<div class="arrow bounce">
  <a class="fa fa-angle-down fa-2x smooth-scroll" href="#after-scroll"></a>
</div>

CSS

a {
    color: #EAEAEA; text-decoration: none;
}

.arrow {
    text-align: center;
    margin-top: 5%;
    font-size: 24px;
}
.bounce {
    -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(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}