Multiple and Repeatable CSS Animations

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<section class="bubbles sectional text-left text-white orange-yellow">
  <div class="container">
    <div class="bubble-wrap">
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div...

SCSS

// Global
.orange-yellow {
  overflow: hidden;
  background: linear-gradient(358deg,#ffea02 0,#ff8d02 78%,#ff8d02 80%,#ff8d02 100%);
}

.hgroup-400 {
  height: 400px;
  @media screen and (max-width: 768px) {
      min-height: 300px;
    }
}
.orange {
    background-color: #ff910e;
    border-color: #ff910e;
    color: #fff;
}
.btn {
    text-transform: uppercase;
}
.btn-lg {
    padding: .5rem 2rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 2rem;
}



// Hero Styles
@keyframes move {
  100% {
    transform: translate3d(0, 0, -3000px);
  }
}
.bubbles {
  transform-style: preserve-3d;
  position: relative;
}
.bubble-wrap {
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: 0;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  transform-origin: center center;
  perspective: 300px;
  overflow: hidden;
}
.bubble {
  position: absolute;
  background: black;
  opacity: .7;
  border-radius: 50%;
  animation: move 5s infinite;
}

@for $i from 1 through 50 {
  .bubble:nth-child(#{$i}){
     $size: random(30)+px;
     height: $size;
     width: $size;
     animation-delay: -$i * .2s;
     transform: translate3d( (random(2000) * 1px),  (random(1000) * 1px), (random(2000) * 1px));
     background: hsl( random(48) , 70%, 50%);
  }
 
}
.dan-in-space-ship {
	bottom: 0;
	right: 0;
  position: absolute;
  width: 100%;
}
.moon-base {
  background: url(/_/images/moon-base.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
}

@media screen and (max-width: 992px) {
  .dan-in-space-ship {
    opacity: .5;
    z-index: -100;
  }
}

@media screen and (max-width: 720px) {
  .dan-in-space-shup {
    right: -200px;
  }
}