<div id="main-container" class="container   main-content">
  <div class="row">
    <h1>Testing</h1>

    <div class="col-md-12">
      <div class="top-video">
        <div class="row">
          <span class="pt_featured_video" style="width:100%;">
            <h4>
              <span class="animate six">
                <span>g</span><span>e</span><span>t</span>
          <span>y</span><span>o</span><span>u</span><span>r</span>
          <p class="intro">&nbsp;&nbsp;text<span id="dot"></span>text</p>
          <span>w</span><span>o</span><span>r</span><span>k</span><span>i</span><span>n</span><span>g</span>
          </span>
          </h4>

        </div>
      </div>
    </div>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
* {
  margin: 0;
}
body {-webkit-text-size-adjust: 100%;}

p.intro {
  white-space: pre;
  font-size: 32px;
  font-family: arial, open sans;
  font-weight: 900;
  margin: 0 30px 0 -6px;
}

#dot {
  width: 15px;
  height: 15px;
  margin: 0 2px;
  display: inline-block;
  background: #c07373;
  vertical-align: middle;
}

.animate {
  display:block;
  font-size: 29px;
  line-height: 1;
  font-weight: 900;
  margin: 0px 0 0;
  font-family: arial, sans-serif;
  color: #c7bcb4;
  word-wrap: break-word;
  padding: 0 0 0 30px;
}

.animate span {
  display: inline-block;
}

.animate span:nth-of-type(2) {
  animation-delay: 0.05s;
}

.animate span:nth-of-type(3) {
  animation-delay: 0.1s;
}

.animate span:nth-of-type(4) {
  animation-delay: 0.15s;
}

.animate span:nth-of-type(5) {
  animation-delay: 0.2s;
}

.animate span:nth-of-type(6) {
  animation-delay: 0.25s;
}

.animate span:nth-of-type(7) {
  animation-delay: 0.3s;
}

.animate span:nth-of-type(8) {
  animation-delay: 0.35s;
}

.animate span:nth-of-type(9) {
  animation-delay: 0.4s;
}

.animate span:nth-of-type(10) {
  animation-delay: 0.45s;
}

.animate span:nth-of-type(11) {
  animation-delay: 0.5s;
}

.animate span:nth-of-type(12) {
  animation-delay: 0.55s;
}

.animate span:nth-of-type(13) {
  animation-delay: 0.6s;
}

.animate span:nth-of-type(14) {
  animation-delay: 0.65s;
}

.animate span:nth-of-type(15) {
  animation-delay: 0.7s;
}

.animate span:nth-of-type(16) {
  animation-delay: 0.75s;
}

.animate span:nth-of-type(17) {
  animation-delay: 0.8s;
}

.animate span:nth-of-type(18) {
  animation-delay: 0.85s;
}

.animate span:nth-of-type(19) {
  animation-delay: 0.9s;
}

.animate span:nth-of-type(20) {
  animation-delay: 0.95s;
}
/* animation six */

.six span {
  color: #000000;
  opacity: 0;
  transform: rotate(-180deg) translate(150px, 0);
  animation: twister 0.7s forwards;
}

@keyframes twister {
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}

@media only screen and (max-width: 760px) {
  .animate {
    font-size: 1.2em;
  }
  .pt_featured_video h4 {
    top: -15px;
    left: -5px;
    width: 80%;
  }
  .intro {
    font-size: 1em;
  }
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.