<p class="popout">
  <span>R</span>
  <span>I</span>
  <span>D</span>
  <span>E</span><br>
  <span>T</span>
  <span>H</span>
  <span>E</span><br>
  <span>W</span>
  <span>A</span>
  <span>V</span>
  <span>E</span>
  
</p>

$t: 1s;
$d: 0.08em;
$n: 3;
$e: cubic-bezier(0.860, 0.000, 0.070, 1.000); 
$front: black;
$back: lightblue;
html{
  background: white;
}

.popout{
  font-family: Futura, sans-serif;
  font-weight: 900;
  font-size: 80px;
  padding: 80px;

  @keyframes ani{
    0%{
      transform: translate3d(0,0,0);
      text-shadow: 0em 0em 0 $back;
      color: $front;
    }
    30%{
      transform: translate3d(0,0,0);
      text-shadow: 0em 0em 0 $back;
      color: $front;
    }
    70%{
      transform: translate3d($d,-$d,0);
      text-shadow: -$d $d $back;
      color: $front;
    }
    100%{
      transform: translate3d($d,-$d,0);
      text-shadow: -$d $d $back;
      color: $front;
    }
  }
  span{
    position: relative;
    display: inline-block;
    animation: ani $t infinite alternate $e;
    @for $i from 1 through $n{
      &:nth-last-child(#{$i}n){ animation-delay: -$t*$i/$n/2;}
    }
  }
  
}