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);
}
}