<!-- Just add the "wobble" class to any text element, and the name of a CSS animation -->
<!-- Fiddle with the @keyframes declarations and wobble span classes to create your own animations -->

<h1 class="wobble">Glorious.</h1>

<h1 class="wobble" data-animation="upscale">Decadent.</h1>

<h1 class="wobble" data-animation="spin">Luxurious.</h1>

<h1 class="wobble" data-animation="skew">Pilfered.</h1>

<h1 class="wobble" data-animation="squash">Voluptuous.</h1>

<h1 class="wobble" data-animation="leap">Excellent.</h1>

<h1 class="wobble" data-animation="fade">Tranquility.</h1>

<h1 class="wobble" data-animation="sheen">Pontificate.</h1>

<h1 class="wobble" data-animation="xspin">Defenestrated.</h1>

<h2 class="wobble" data-animation="fade">It also works for longer sentences, by the way.</h2>



@keyframes jump
  50%
    -webkit-transform: translateY(-30%)
    transform: translateY(-30%)

@keyframes upscale
  50%
    -webkit-transform: scale(1.5)
    transform: scale(1.5)

@keyframes spin
  50%
    -webkit-transform: rotate(180deg)
    transform: rotate(180deg)

@keyframes squash
  50%
    -webkit-transform: scaleY(0)
    transform: scaleY(0)

@keyframes skew
  50%
    -webkit-transform: skew(-30deg)
    transform: skew(-30deg)

@keyframes leap
  50%
    -webkit-transform: translateY(-50%) rotate(-15deg)
    transform: translateY(-50%) rotate(-15deg)

@keyframes fade
  50%
    -webkit-transform: translateY(50%)
    transform: translateY(50%)
    opacity: 0

@keyframes sheen
  50%
    -webkit-transform: translateY(-10%)
    transform: translateY(-10%)
    color: #eee

@keyframes xspin
  50%
    -webkit-transform: scaleX(0)
    transform: scaleX(0)

body
  padding: 40px
  font-family: 'Baloo Thambi 2'
  color: #333

h1
  font-size: 50px
  font-weight: 800
  cursor: default
  margin-bottom: 30px
  float: left
  clear: left

h2
  float: left
  clear: left
  margin-bottom: 50px
  font-size: 25px

.wobble
  span
    display: inline-block
    pointer-events: none
  span.jump
    animation: jump 0.5s 1
  span.upscale
    animation: upscale 0.5s 1
  span.spin
    animation: spin 0.5s 1
  span.skew
    animation: skew 0.5s 1
  span.squash
    animation: squash 0.5s 1
    -webkit-transform-origin: bottom
    transform-origin: bottom
  span.leap
    animation: leap 0.7s 1
  span.fade
    animation: fade 0.5s 1
  span.sheen
    animation: sheen 0.3s 1
  span.xspin
    animation: xspin 0.5s 1

.info
  background: #f6f6f6
  padding: 30px
  margin-bottom: 50px
  border-radius: 4px
  box-shadow: 0 20px 50px -45px #333
  max-width: 600px

  p
    font-size: 18px
    line-height: 1.4

  p + p
    margin-top: 20px

  a
    color: coral
    text-decoration: none
View Compiled 
var wobbleElements = document.querySelectorAll('.wobble');

wobbleElements.forEach(function(el){
  el.addEventListener('mouseover', function(){
    
    if(!el.classList.contains('animating') && !el.classList.contains('mouseover')){
    
      el.classList.add('animating','mouseover');
    
      var letters = el.innerText.split('');
      
      setTimeout(function(){ el.classList.remove('animating'); }, (letters.length + 1) * 50);
      
      var animationName = el.dataset.animation;
      if(!animationName){ animationName = "jump"; }
    
      el.innerText = '';
    
      letters.forEach(function(letter){
        if(letter == " "){
          letter = "&nbsp;";
        }
        el.innerHTML += '<span class="letter">'+letter+'</span>';
      });
      
      var letterElements = el.querySelectorAll('.letter');
      letterElements.forEach(function(letter, i){
        setTimeout(function(){
          letter.classList.add(animationName);
        }, 50 * i);
      });
      
    }
    
  });
  
  el.addEventListener('mouseout', function(){       
    el.classList.remove('mouseover');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.