<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 class="circle"></div>
  <div class="circle"></div>
</div>

html, body {
  width: 100%;
  height: 100%;
  background-color: purple;
  background: -webkit-linear-gradient(to bottom, #f7797d, #FBD786, #C6FFDD);
  background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD);
  background: #f12711;
  background: -webkit-linear-gradient(to bottom, #f5af19, #f12711); 
  background: linear-gradient(to bottom, #f5af19, #f12711);


}

.animation-wrapper {
  width: 14.5em;
  height: 6em;
  background-color: black;
  transform: translateX(51em) translateY(8em) scale(3.2);
  margin: 1.5em 1.8em;
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  /* background-color: turquoise; */
  background-color: magenta;
  animation: move-the-circle 1.5s infinite;
  transform-origin: center center;
}

@for $num from 1 through 8 {
  .circle:nth-child(#{$num}) {
    left: ($num - 1) * 30px;
    animation-delay: $num * 0.1s;
  }
}

@keyframes move-the-circle {
  0% {
    transform: translate(0, 10px) scale(1);
    opacity: 1;
    background-color: magenta;
  }
  50% {
    transform: translate(0, 50px) scale(0.4);
    opacity: 0.5;
    background-color: blue;
  }
  100% {
    transform: translate(0, 10px) scale(1);
    opacity: 1;
    background-color: purple;
  }
}