Check out this Cool Pure CSS Dripping Down Arrow Designed by Thomas Nägele.
Scroll down icon animation
HTML
[code language=”html”]
<div class="container">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<span class="text">Scroll down</span>
<a class="text" href="https://naegele.it">See it in action</a>
</div>
[/code]
CSS
[code language=”css”]
body {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background: #333;
}
.container {
position: relative;
width: 24px;
height: 24px;
}
.chevron {
position: absolute;
width: 28px;
height: 8px;
opacity: 0;
transform: scale3d(0.5, 0.5, 0.5);
animation: move 3s ease-out infinite;
}
.chevron:first-child {
animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
content: ‘ ‘;
position: absolute;
top: 0;
height: 100%;
width: 51%;
background: #fff;
}
.chevron:before {
left: 0;
transform: skew(0deg, 30deg);
}
.chevron:after {
right: 0;
width: 50%;
transform: skew(0deg, -30deg);
}
@keyframes move {
25% {
opacity: 1;
}
33% {
opacity: 1;
transform: translateY(30px);
}
67% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
}
}
.text {
display: block;
margin-top: 75px;
margin-left: -30px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
white-space: nowrap;
opacity: .25;
animation: pulse 2s linear alternate infinite;
}
@keyframes pulse {
to {
opacity: 1;
}
}
[/code]
