repeat-css-animations

Tutorial

For detailed instruction's, view Solodev's RCA_POST_TITLE article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<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 class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble"></div>
    </div>
    <div class="hgroup-400 row">
      <div class="col-md-6 col-lg-5 col-xl-4 d-flex align-items-center">
        <div>
          <h1 class="h2">Enterprise Hosting that's out of this world</h1>
          <p class="h-subhead">Pilot your website on the only platform built for the AWS Cloud</p>
          <a class="btn btn-lg orange" href="https://www.solodev.com/free-trial/" target="_blank">Start for Free</a>
        </div>
      </div>
      <div class="col-lg-7 col-md-6">
        <img alt="Captain Piloting" class="text-right dan-in-space-ship" src="https://www.solodev.com/core/fileparse.php/8/urlt/_/images/dan-in-space-ship.png">
      </div>
    </div>
  </div>
</section>

SCSS

All required SCSS is contained with repeat-css-animation.scss

External Resources

This tutorial includes the following third party resources.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<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>