$particles: 150;
$particleSizeNum: 50;
$particleSize: #{$particleSizeNum}px;
$maxHigh: 150px;
$periodicity: 1s;
$particlePeriodicity: $periodicity / $particles;
$spread: 0.11;
$color1: #facbcc;
$color2: #a7b3d1;

html,
body {
  overflow: hidden;
  background: #fff;
}

.sine {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translateY(-$maxHigh/2);
}

.sine-2 {
  transform: translateY($maxHigh/2) scale(1, -1);
  opacity: .55;
  b {
    background-color: $color2;
  }
}

i {
  display: block;
  position: absolute;
  opacity: 1;
  b {
    display: block;
    width: $particleSize;
    height: $particleSize;
    border-radius: $particleSize;
    background: $color1;
    animation-name: sine;
    animation-duration: $periodicity;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
}

@for $i from 1 through $particles {
  i:nth-child(#{$i}) {
    $x: (($i * $particleSizeNum) - ($particles * $particleSizeNum / 2)) * $spread;
    $y: 0;
    transform: translate3d( #{$x}px, 0, 0);
    b {
      animation-delay: $i * $particlePeriodicity;
    }
  }
}

@keyframes sine {
  0%,
  100% {
    transform: translateY( 0px);
  }
  50% {
    transform: translateY( $maxHigh);
  }
}