<p class="explode">
	<span>H</span>
	<span>e</span>
	<span>l</span>
	<span>l</span>
	<span>o</span>
	<span>&nbsp</span>
	<span>W</span>
	<span>o</span>
	<span>r</span>
	<span>l</span>
	<span>d</span>
</p>

.explode > * {
      transition: transform 600ms ease;
      display: inline-block;
    }

.explode:hover > span:nth-child(1) {
	transform: translate(-7px, 10px) rotate(3deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(2) {
	transform: translate(8px, -2px) rotate(-4deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(3) {
	transform: translate(4px, 4px) rotate(0deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(4) {
	transform: translate(-2px, 6px) rotate(2deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(5) {
	transform: translate(5px, -8px) rotate(1deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(6) {
	transform: translate(9px, -4px) rotate(6deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(7) {
	transform: translate(6px, 9px) rotate(-9deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(8) {
	transform: translate(-2px, 4px) rotate(10deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(9) {
	transform: translate(3px, -5px) rotate(7deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(10) {
	transform: translate(-9px, -6px) rotate(-4deg) scale(1.00);
	opacity:1.00
}
.explode:hover > span:nth-child(11) {
	transform: translate(4px, 9px) rotate(-8deg) scale(1.00);
	opacity:1.00
}