Text moving along the border

by Marius Jopen

HTML

<div class="wrapper">

  <div class="hide" id="tl"></div>
  <div class="hide" id="tr"></div>
  <div class="hide" id="bl"></div>
  <div class="hide" id="br"></div>



  <div class="text" id="poo">
    <div class="inside">

      POO
    </div>
  </div>


  <div class="text" id="a-2">
    <div class="inside">
      A
    </div>
  </div>


  <div class="text" id="for-2">
    <div class="inside">

      FOR
    </div>
  </div>

  <div class="text" id="short">
    <div class="inside">

      SHORT
    </div>
  </div>



  <div class="text" id="too-2">
    <div class="inside">
      TOO
    </div>
  </div>


  <div class="text" id="pee">
    <div class="inside">

      PEE,
    </div>

  </div>


  <div class="text" id="a">
    <div class="inside">
      A
    </div>
  </div>


  <div class="text" id="for">
    <div class="inside">

      FOR
    </div>
  </div>


  <div class="text" id="long">
    <div class="inside">
      LONG
    </div>
  </div>

  <div class="text" id="too-o2">
    <div class="inside">
      O
    </div>
  </div>

  <div class="text" id="too-o">
    <div class="inside">
      O
    </div>
  </div>

  <div class="text" id="too-t">
    <div class="inside">
      T
    </div>
  </div>

</div>

CSS

body {
  width: 100%;
  height: 100%;
  background: black;
  font-family: helvetica;
}

#tl {
  top: 0px;
  left: 0px;
}

#tr {
  top: 0px;
  right: 0px;
}

#bl {
  bottom: 0px;
  right: 0px;
}

#br {
  bottom: 0px;
  left: 0px;
}

.hide {
  width: 40vh;
  height: 25vh;
  position: absolute;
  z-index: 100;
}

.text {
  color: white;
  position: absolute;
  font-size: 10vw;
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  width: 30vh;
}

.inside {
  animation-duration: 16s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 25% 20%;
}

#too-t {
  animation-name: too;
}

#too-t .inside {
  animation-name: too-inside;
}

#too-o {
  animation-name: too;
  animation-delay: -0.25s;
}

#too-o .inside {
  animation-name: too-inside;
  animation-delay: -0.25s;
}

#too-o2 {
  animation-name: too;
  animation-delay: -0.5s;
}

#too-o2 .inside {
  animation-name: too-inside;
  animation-delay: -0.5s;
}

#long {
  animation-name: too;
  animation-delay: -1.2s;
}

#long .inside {
  animation-name: too-inside;
  animation-delay: -1.2s;
}

#for {
  animation-name: too;
  animation-delay: -2.4s;
}

#for .inside {
  animation-name: too-inside;
  animation-delay: -2.4s;
}

#a {
  animation-name: a;
}

#a .inside {
  animation-name: too-inside;
  animation-delay: -4s;
}

#pee {
  animation-name: a;
  animation-delay: -1.2s;
}

#pee .inside {
  animation-name: too-inside;
  animation-delay: -5.2s;
}

#too-2 {
  animation-name: too-2;
}

#too-2 .inside {
  animation-name: too-inside;
  animation-delay: -8s;
}

#short {
  animation-name: too-2;
  animation-delay: -1.2s;
}

#short .inside {
  animation-name: too-inside;
  animation-delay: -9.2s;
}

#for-2 {
  animation-name: too-2;
  animation-delay: -2.4s;
}

#for-2 .inside {
  animation-name: too-inside;
  animation-delay: -10.4s;
}

#a-2 {
  animation-name: a-2;
}

#a-2 .inside {
  animation-name: too-inside;
  animation-delay:...