<div class="cScrollDown"></div>
.cScrollDown {
width: 2px;
height: 60px;
position: relative;
}
.cScrollDown::before,
.cScrollDown::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.cScrollDown::before {
background: #f3f3f3;
width: 100%;
height: 100%;
}
.cScrollDown::after {
background: #333;
width: 8px;
height: 8px;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
0% {
transform: translateX(-50%) scale(0);
top: 0;
}
15% {
transform: translateX(-50%) scale(0);
top: 0;
}
90% {
transform: translateX(-50%) scale(1);
top: 100%;
opacity: 1;
}
100% {
transform: translateX(-50%) scale(1);
top: 100%;
opacity: 0;
}
}