<div class="container"> 
  <h1>
    Lorem Ipsum
  </h1>
</div>

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Oswald', helvetica;
  background-color: #333;
  color: #fff;
  height: 100vh;
  font-size: 30px;

  h1 {
    overflow: hidden;
    line-height: 1;
    span {
      letter-spacing: 3px;
      font-weight: 300;
      display: inline-block;
      text-transform: uppercase;
      animation-duration: 0.5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transition-timing-function: ease-out;
      transform: translate3d(-30%, -100%, 0);
    }
    
    @for $i from 1 through 10 {
      span:nth-child(#{$i}) {
        animation-delay: $i * 0.03s;
        animation-name: rampUp;
      }  
    }
  }
}

@keyframes rampUp {
  0% {
    transform: translate3d(-30%, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

var spanText = function spanText(text) {
  var string = text.innerText;
  var spaned = '';
  for (var i = 0; i < string.length; i++) {
    if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
    else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
  }
  text.innerHTML = spaned;
}


var headline = document.querySelector("h1");

spanText(headline);