@keyframes moveUp {
    0%, 16.67% { transform: translateY(0px); opacity: 0.4; } /* Stay at Bottom */
    50% { transform: translateY(-10px); opacity: 1; } /* Peak */
    83.33%, 100% { transform: translateY(0px); opacity: 0.4; } /* Back to Bottom & Pause */
}

.dot-container {
    position: relative;
    height: 15px;
    width: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.dot {
    width: 6px;
    height: 6px;
    background: black;
    opacity: 0.4;
    border-radius: 50%;
    position: relative;
    animation: moveUp 1005ms infinite ease-in-out; /* 3s - slow */
}

.dot:nth-child(1) { animation-delay: 0ms; } /* 0s - slow */
.dot:nth-child(2) { animation-delay: 350ms; } /* 1000ms - slow */
.dot:nth-child(3) { animation-delay: 700ms; } /* 2000ms - slow */