CSS3 Character Animation

Character Animation with javascript and CSS3

HTML

<h1 class="active">Character Animation</h1>
<button>Animate</button>

CSS

* { margin: 0; padding:0; }
html { text-align: center; font-family: Georgia }

h1 { 
    padding: 10px 0; 
    color: #123456; 
    font-size: 60px; 
    overflow: hidden;
}

.h1-part {
    display: inline-block;
    opacity: 0;
    transform: translateX(150px) rotate(180deg);

}

.active .h1-part {
    opacity: 1;
    transform: translateX(0);
}

button {
    font-size: 1.125rem;
    color: #FFFFFF;
    line-height: 2.6875rem;
    height: 2.6875rem;
    transition: background-color 250ms ease-in-out;
    display: inline-block;
    background-color: #d32116;
    border-radius: 0.25rem;
    padding: 0 1.25rem;
    border: none;
    outline: none;
    cursor: pointer;
}

button:hover {
    background-color: #a51c08;
}

JavaScript

var h1 = {};
h1.elm = document.querySelector('h1');
h1.initialText = h1.elm.innerHTML;
h1.innerTextLength =  h1.initialText.length;
h1.formatedText = '';

var nthChar = 1;
for(var i = 0; i < h1.innerTextLength; i++){
    if(h1.initialText[i] != ' '){
        h1.formatedText += '<span style="transition-delay: '+ (nthChar*40)+'ms' +'" class="'+ 'h1-part h1-part-'+ (nthChar) +'">' + h1.initialText[i] + '</span>';
        nthChar++;
    }else {
        h1.formatedText += '<span>' + h1.initialText[i] + '</span>';
    } 
}

h1.elm.innerHTML = h1.formatedText;


var button = document.querySelector('button');
var active = true;
button.addEventListener('click', function(){
    if(active === true){
        h1.elm.className = '';
        active = false;
    }else {
        h1.elm.className = 'active';
        active = true;
    }
    
},false);