JSFiddle - React, Tailwind, and code Playground

by adamk33n3r

HTML

<div id="test">
<div id="text-container">
<span id="text"></span>
</div>
</div>

CSS

#test {
  display: table;
  margin: auto;
  margin-top: 100px;
  background: black;
  width: 1000px;
  height: 500px;
  border: 10px yellow solid;
  animation-name: tilt;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
#text-container {
  display: table-cell;
  margin-left: -50px;
  vertical-align: middle;
  text-align: center;
}
#text {
  color: #00cccc;
  font-size: 16pt;
  font-weight: normal;
  font-family: serif;
  animation: cool 4s ease-in-out 0s infinite alternate;
}

@keyframes tilt {
  from {
    transform: perspective(1000px) rotateY(20deg);
  }
  to {
    transform: perspective(1000px) rotateY(-20deg);
  }
}

@keyframes cool {
  from {
    margin-left: 300px;
  }
  to {
    margin-left: -300px;
  }
}

JavaScript

var sentence = "A long time ago in a galaxy far, far away . . . .";

var words = sentence.split(' ');
var cursor = 0;
var textEle = document.getElementById('text');
var id = setInterval(function () {
  if (cursor == words.length - 1) {
  	clearInterval(id);
  }
	textEle.innerHTML += ' ' + words[cursor];
	cursor++;
}, 100);