<div id="outer-div">
	<p id="demo">Rainbow!</p>
</div>
<div id="button"><span>Animate</span></div>
<input oninput="updateInner()" placeholder="TEXT TO ANIMATE"></input>

@import url('https://fonts.googleapis.com/css?family=Lato');

html {
	background-color: black;
	overflow:hidden;
}

body {
	width: 100%;
	height: 100%
}

#demo {
	text-transform: uppercase;
	font-family: Lato;
	font-size: 100px;
	color: black;
	margin: 0;
	border-bottom: 1px solid white
}

#demo span {
	display: inline-block
}

.animated {
	animation: customRainbow 4s infinite;
	transition-timing-function: linear;
}

.text {
	text-shadow-color
}

@keyframes customRainbow {
    0%   { text-shadow: 0px 0px 5px red; }
    14%  { text-shadow: 0px 0px 5px orange; }
    28%  { text-shadow: 0px 0px 5px yellow; -webkit-transform: translatey(-25px)}
    43%  { text-shadow: 0px 0px 5px green; }
    57% { text-shadow: 0px 0px 5px blue; }
	71% { text-shadow: 0px 0px 5px indigo; }
	85% { text-shadow: 0px 0px 5px violet; }
	100% { text-shadow: 0px 0px 5px red; }
}

#button {
	font-weight: bold;
	padding: 1px;
	background-color: black;
	border: 2px solid white;
	border-radius: 10px;
	color: white;
	width: 100px;
	height: 30px;
	text-align: center;
	vertical-align: middle;
	-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
	user-select: none;
	position: absolute;
	left: 50%;
	bottom: 20%;
	cursor: pointer;
}


input {
	position: absolute;
	left: 47.5%;
	bottom:10%;
	background: black;
	color: white;
}

#outer-div {
	text-align:center;
	position: absolute;
	top: 40%;
	width: 100%;
	margin: 0
}

const textElement = document.getElementById('demo');
const textInput = document.querySelector('input')

function animate() {
	var text = textElement.innerHTML;
	text = text.replace(" ", "_")
	var len = text.length
	var wrapped = "";
	for (var i in text) {
		wrapped += '<span>' + text.charAt(i) + '</span>';
	}
	textElement.innerHTML = wrapped
	var delay = 0
	for (var i = 0; i < len; i++) {
		var childQuery = "#demo span:nth-child(" + (i + 1) + ")"
		document.querySelector(childQuery).style.animationDelay = delay + "s";
		delay += 0.25
	}

	document.querySelectorAll('#demo span').forEach(span => span.classList.add('animated'))
}

document.getElementById('button').addEventListener('click', function() {
	animate()
	if(textInput.value === "") {
		textElement.innerHTML = ""
	}
})

function updateInner() {
	textElement.innerHTML = textInput.value
}

animate()