CaveOps | Snippets: Dots Wave Animation

@keyframes move-the-circle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        background-color: turquoise;
    }
    50% {
        transform: translate(0, 50px) scale(.4);
        opacity: .5;
        background-color: blue;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        background-color: turquoise;
    }
}
html { font-size: 20px; background: #fff; }
body {
	min-height: 100vh;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}
.animation-wrapper {
    height: 100px;
    width: 80%;
    background: #012F48;
    padding: 0 20px;
    border-radius: 4px;
    min-width: 160px
}

.animation-wrapper .circle {
    display: inline-block;
    margin: 20px 6px 0 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #1482E8;
}

.animation-wrapper .circle {
    animation: move-the-circle 1s ease infinite;
}

.animation-wrapper .circle:nth-child(1) { animation-delay: 0.1s; }
.animation-wrapper .circle:nth-child(2) { animation-delay: 0.2s; }
.animation-wrapper .circle:nth-child(3) { animation-delay: 0.3s; }
.animation-wrapper .circle:nth-child(4) { animation-delay: 0.4s; }
.animation-wrapper .circle:nth-child(5) { animation-delay: 0.5s; }
.animation-wrapper .circle:nth-child(6) { animation-delay: 0.6s; }

CSS Before Head

HTML Head

CSS After Head

JS Before HTML Body

<div class="animation-wrapper">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</div>

HTML Body

HTML Foot

JS After HTML Body