<div id="showcase_table"><div id="showcase_cell">


<div class="bounce_in_animation">Hello world.</div>
</div></div>

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
  }
  40% {
    transform: scale(1.15)
  }
  70% {
    transform: scale(.9)
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideDown {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    transform: translateY(5px);
  }
  70% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    transform: translateY(-3px);
  }
  70% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes spinIn {
  0% {
    opacity: 0;
    transform: rotate(180deg) scale(0);
  }
  20% {
    opacity: 1;
  }
  40% {
    transform: rotate(360deg) scale(1.15)
  }
  70% {
    transform: rotate(360deg) scale(.9)
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

// unimportant, for display purposes only

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

body, html {
  height: 100%;
  background-color: #3498db;
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size: 30pt;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#showcase_table {
  display: table;
  width: 100%;
  height: 100%;
}

#showcase_cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.bounce_in_animation {
  text-align: left;
  display: inline-block;
  width: 350px;
}

(function( $ ){
  
  $.fn.textAnimation = function( animation_speed, text_speed, animation ){
    var text, i = 0;
    var $this = $(this);
    
    // store text and clear
    text = $this.text();
    $this.css('white-space', 'pre');
    $this.html('');
    
    var addLetter = setInterval(function(){
      $this.append('<div class="text_animation" style="display: inline-block; animation: ' + animation + ' ' + animation_speed + 'ms forwards">' + text[i] + '</div>');
      i++;
      if (i == text.length) clearInterval(addLetter);
    }, text_speed);
  }
})( jQuery )


var temp = $('.bounce_in_animation').text();
var i = 1;

$('.bounce_in_animation').textAnimation(250, 50, 'bounceIn');

setInterval(function(){
  i %= 4;
  $('.bounce_in_animation').html(temp);
  switch(i) {
    case 0:
      $('.bounce_in_animation').textAnimation(250, 50, 'bounceIn');
      break;
    case 1:
      $('.bounce_in_animation').textAnimation(250, 50, 'slideDown');
      break;
    case 2:
      $('.bounce_in_animation').textAnimation(250, 50, 'slideUp');
      break;
    default:
      $('.bounce_in_animation').textAnimation(250, 50, 'spinIn');
          }
  i++;
}, 1000 + 50 * temp.length + 250)