pics

.blahblah { font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 40px; position: absolute; width: 450px; left: 50%; margin-left: -225px; height: 40px; top: 50%; margin-top: -20px;} .blahblah p { display: inline-block; vertical-align: top; margin: 0;} .word { position: absolute; width: 220px; opacity: 0;} .letter { display: inline-block; position: relative; float: left; 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);} .wisteria { color: #8e44ad;} .belize { color: #2980b9;} .pomegranate { color: #c0392b;} .green { color: #16a085;} .midnight { color: #2c3e50;}

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);