<!-- 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

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 = " ";
				}
				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');
	});
});