CSS3 balancing hover effect

dabblet.css

/**
 * CSS3 balancing hover effect
 * Read the tutorial here: http://webbb.be/blog/little-css3-3d-hover-effects/
 */
body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}

.block { 
	width: 150px; color: #fff; margin: 30px auto; text-transform: uppercase; text-align: center; font-family: Helvetica; 
	position: relative; 
	perspective: 350;
}
.block .normal {
	background: gray; padding: 15px; cursor: pointer;
	position:relative; z-index:2;
}
.block .hover {
	background: #00aced; margin-top:-48px; padding: 15px; display: block; color: #fff; text-decoration: none;
	position: relative; z-index:1;
	transition: all 250ms ease;
}
.block:hover .normal {
	background: #0084b4;
}
.block:hover .hover {
	margin-top: 0; 
	transform-origin: top;
	/*
	animation-name: balance;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-delay: 110ms;
	animation-iteration-count: 1;
	animation-direction: alternate;
	*/
	animation: balance 1.5s ease-in-out 110ms 1 alternate;
}

@keyframes balance { 
	0% { margin-top: 0; } 
	15% { margin-top: 0; transform: rotateX(-50deg); }	
	30% { margin-top: 0; transform: rotateX(50deg); } 
	45% { margin-top: 0; transform: rotateX(-30deg); } 
	60% { margin-top: 0; transform: rotateX(30deg); } 
	75% { margin-top: 0; transform: rotateX(-30deg); } 
	100% { margin-top: 0; transform: rotateX(0deg);} 
}

dabblet.html

<div class="block">
	<div class="normal">
		<span>Follow me...</span>
	</div>
	<a target="_BLANK" class="hover" href="http://twitter.com/benoitboucart" title="My twitter profile">
		on Twitter
	</a>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}