<div class="text-waves-container">
	<div class="word">Cryptocurrency</div>
	<div class="word">Cryptocurrency</div>
</div>

<!--
	If you want to apply the wave effect to multiple words,
	use &nbsp; as a spacer between the words, like this :
	Crypto&nbsp;currency
-->

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

.text-waves-container {
	position : relative;
	width    : 600px;
	height   : 100px ;
	margin   : auto;
	color    : #099;
	font     : 400 100px/100px 'Voltaire';
	}

.word {
	position   : absolute;
	width      : 600px;
	text-align : center;
	opacity    : 0;
	}

.letter {
	position         : relative;
	display          : inline-block;  
	transform        : translateZ(25px);
	transform-origin : 50% 50% 25px;
	}

.letter.out {
	transform  : rotateX(90deg);
	transition : transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	}

.letter.behind {
	transform : rotateX(-90deg);
	}

.letter.in {
	transform  : rotateX(0deg);
	transition : transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
	splitLetters(words[i]);
}

function changeWord() {
	var cw = wordArray[currentWord];
	var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
	for (var i = 0; i < cw.length; i++) {
		animateLetterOut(cw, i);
	}
  
	for (var i = 0; i < nw.length; i++) {
		nw[i].className = 'letter behind';
		nw[0].parentElement.style.opacity = 1;
		animateLetterIn(nw, i);
	}
  
	currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
	setTimeout(function() {
		cw[i].className = 'letter out';
	}, i*80);
}

function animateLetterIn(nw, i) {
	setTimeout(function() {
		nw[i].className = 'letter in';
	}, 340+(i*80));
}

function splitLetters(word) {
	var content = word.innerHTML;
	word.innerHTML = '';
	var letters = [];
	for (var i = 0; i < content.length; i++) {
		var letter = document.createElement('span');
		letter.className = 'letter';
		letter.innerHTML = content.charAt(i);
		word.appendChild(letter);
		letters.push(letter);
	}
  
	wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 4000);