<div class="wrap">
    <div class="dot dot-1"></div>
    <div class="dot dot-2"></div>
    <div class="dot dot-3"></div>
    <div class="dot dot-4"></div>
    <div class="dot dot-5"></div>
    <div class="dot dot-6"></div>
    <div class="dot dot-7"></div>
    <div class="dot dot-8"></div>
    <div class="dot dot-9"></div>
    <div class="dot dot-10"></div>
    <div class="dot dot-11"></div>
    <div class="dot dot-12"></div>
    <div class="dot dot-13"></div>
    <div class="dot dot-14"></div>
    <div class="dot dot-15"></div>
    <div class="dot dot-16"></div>
    <div class="dot dot-17"></div>
    <div class="dot dot-18"></div>
    <div class="dot dot-19"></div>
    <div class="dot dot-20"></div>
</div>
$duration: 60;
$numberOfDots: 20;
$oscillationSpeed: 80;
$bg: #F8D15C;
$dot: #8B57B1;

* {
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
	overflow: hidden;
  background: $bg;
}

.dot {
  width: 12px;
  height: 12px;
  background: $dot;
  border-radius: 50%;
  margin: 5px;
}

@for $i from 1 through $numberOfDots {
	$time: $duration / ($oscillationSpeed + $numberOfDots - $i);
	.dot-#{$i} {
		animation: dot ($time * 1000) + ms ease-in-out infinite;
	}
}


@keyframes dot {
	0%, 100% {
		transform: translate3d( 0, 100px,0 );
	}
	50% {
		transform: translate3d( 0, -100px,0 );
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.