Text Animation

HTML

<div class="quote">Blog</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300');

.quote {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 300;
  font-size: 24px;
  color: #5ac7d7;
  position:relative;
  transition: all 0.4s ease 0s;
  top: 0;
  
}
.quote div
{
  top: 0;
  transition: all 0.4s ease 0s;
  position: relative;
}
.quote .anim {
  top:-10px;
  position:relative;
  transition: all 0.4s ease 2s;
}

JavaScript

// Special syntax for defining quotes without having to use loads of markup!
var quoteMap = 'B[l]og';

// Set the quote element's contents to the generated HTML.
var quote = document.querySelector('.quote');

// Wrap all characters in `on` or `off` classes and add line breaks.
function quoteMapToHTML(input) {
  var on = false;
  return input.split('').map(function(char) {
    switch (char) {
      case '[': return on = 1, '<span class="no">';
      case ']': return on = 0, '</span>';
      case '|': return '<br/>';
      default: return on ? char : (
        '<span class="anim">' + char + '</span>'
      );
    }
  }).join('');
}

setInterval(function(){

// Set the quote element's contents to the generated HTML.
var quote = document.querySelector('.quote');
quote.innerHTML = quoteMapToHTML(quoteMap);

},3000);


// When the `.animated` class is set on the quote element it will fade out all `.off` selectors (see CSS code)
var toggle = document.querySelector('#toggle');
toggle.addEventListener('click', function() {
  quote.classList.toggle('animate');
});