<h1>
  <span>Word</span> 
  <span>Word</span> 
  <span>Word</span> 
  <span>Word</span>
</h1>

<div class="move">
  <p>Back and forth. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi alias, amet itaque enim animi atque praesentium dignissimos ipsum autem corporis voluptatibus, vel quasi sed, dicta delectus exercitationem voluptas sequi veniam?</p>
</div>

<div class="move reverse">
  <p>Back and forth and barf. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi alias, amet itaque enim animi atque praesentium dignissimos ipsum autem corporis voluptatibus, vel quasi sed, dicta delectus exercitationem voluptas sequi veniam?</p>
</div>

<div class="move hover">
  <p>Forward on hover. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi alias, amet itaque enim animi atque praesentium dignissimos ipsum autem corporis voluptatibus, vel quasi sed, dicta delectus exercitationem voluptas sequi veniam?</p>
</div>

@import 'https://fonts.googleapis.com/css?family=Fugaz+One|Monda';


$anim-duration: 3000ms;
$move-amount: 3px;
$red : hsla(0, 100%, 50%, 0.5);
$cyan : hsla(180, 100%, 50%, 0.5);


body {
  padding: 5vw;
  background: hsla(0, 0%, 0%, 0); 
}


h1 {
  color: rgba(0,0,0,0.0);
  font: normal 60px Fugaz One, sans-serif;
  left: 0;
  letter-spacing: 5px;
  margin: 0 0 1em;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  
  
  span:nth-child(1) {
    font-size: 50px;
    text-shadow: 
      4px 0 $red, 
      -4px 0 $cyan;
  }
  span:nth-child(2) {
    font-size: 50px;
    text-shadow: 
      2px 0 $red, 
      -2px 0 $cyan;
  }
  span:nth-child(3) {
    font-size: 60px;
    text-shadow: 
      -2px 0 $red, 
      2px 0 $cyan;
  }
  span:nth-child(4) {
    font-size: 70px;
    text-shadow: 
      -5px 0 $red, 
      5px 0 $cyan;
  }
}


.move {
  padding: 2em;
  margin-bottom: 3em;
  border: 1px solid transparent;
  border-radius: 2em;
  position: relative;
  color: transparent;
  text-shadow: 
      -$move-amount 0 $red, 
      $move-amount 0 $cyan;
  animation: move-text $anim-duration infinite;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    border-size: 1px;
    border-radius: 2em;
    border-style: solid;
    width: 100%;
    height: 100%;
    animation: move-border $anim-duration infinite;
  }
  
  &:before {
    left: -$move-amount;
    border-color: $cyan;
    animation-delay: $anim-duration / 2;
  }
  &:after {
    left: $move-amount;
    border-color: $red;
  }
}

.move.reverse {
  &:before {
    left: $move-amount;
    border-color: $cyan;
    animation-delay: -$anim-duration;
  }
  &:after {
    left: -$move-amount;
    border-color: $red;
    animation-delay: $anim-duration / 2;
  }
}

.move.hover {
  text-shadow:
      0 0 $red, 
      0 0 $cyan;
  animation: none;  
  transition: all $anim-duration / 4;
  
  &:before,
  &:after {
    left: 0;
    animation: none;  
    transition: all $anim-duration / 4;
  }
  
  &:hover {
    text-shadow: 
      -$move-amount 0 $red, 
      $move-amount 0 $cyan;
    
    &:after {
      left: -$move-amount;
    }

    &:before {
      left: $move-amount;
    }
  }
}

@keyframes move-text {
  0%, 100% {
    text-shadow: 
      -$move-amount 0 $red, 
      $move-amount 0 $cyan;    
  }
  50% {
    text-shadow: 
      $move-amount 0 $red, 
      -$move-amount 0 $cyan;    
  }
}

@keyframes move-border {
  0%, 100% {
    left: -$move-amount  
  }
  50% {
    left: $move-amount;    
  }
}