As seen on http://gopotluck.com/

css3-text-explosion.css

/* 
	STUFF'S GONNA 'SPLODE
	---------------------
   
	The following CSS enables the exploding effect on the input label.
	(Only seen on modern browsers.)

	Context: http://gopotluck.com/
	Related tutorial: http://designintellection.com/lab/exploding-text/
*/

#email-signup-label .char1,
#email-signup-label .char2,
#email-signup-label .char3,
#email-signup-label .char4,
#email-signup-label .char5,
#email-signup-label .char6,
#email-signup-label .char7,
#email-signup-label .char8,
#email-signup-label .char9,
#email-signup-label .char10,
#email-signup-label .char11,
#email-signup-label .char12,
#email-signup-label .char13,
#email-signup-label .char14,
#email-signup-label .char15,
#email-signup-label .char16,
#email-signup-label .char17,
#email-signup-label .char18,
#email-signup-label .char19,
#email-signup-label .char20,
#email-signup-label .char21,
#email-signup-label .char22,
#email-signup-label .char23,
#email-signup-label .char24,
#email-signup-label .char25,
#email-signup-label .char26,
#email-signup-label .char27,
#email-signup-label .char28,
#email-signup-label .char29,
#email-signup-label .char30,
#email-signup-label .char31,
#email-signup-label .char32,
#email-signup-label .char33,
#email-signup-label .char34,
#email-signup-label .char35,
#email-signup-label .char36,
#email-signup-label .char37,
#email-signup-label .char38,
#email-signup-label .char39,
#email-signup-label .char40,
#email-signup-label .char41,
#email-signup-label .char42,
#email-signup-label .char43,
#email-signup-label .char44,
#email-signup-label .char45,
#email-signup-label .char46,
#email-signup-label .char47,
#email-signup-label .char48
{
	/* We need a non-inline display for the translation to work. */
	display:inline-block;
	
	/* Prepare opacity for reduction. */
	opacity:1;
	
	/* Prepare static state for translation.
	   (translate3d enables hardware acceleration for webkit. Or something like that.) */
	-webkit-transform: translate3d( 0, 0, 0 );
	   -moz-transform: translate(   0, 0   );
	        transform: translate(   0, 0   );
	
	/* Add transition animations on all. Though it's only working on webkit.
	   (I didn't spend much time investigating why.) */
	-webkit-transition:all 0.5s ease-out;
	   -moz-transition:all 0.5s ease-out;
	        transition:all 0.5s ease-out;
}

#email-signup-label .char8,
#email-signup-label .char12,
#email-signup-label .char18,
#email-signup-label .char26,
#email-signup-label .char33,
#email-signup-label .char35,
#email-signup-label .char40
{
	/* Because we set the individual characters as display:inline-block
	   we need to manually create our spaces. */
	width:5px;
}


#email-signup-label:hover .char1,
#email-signup-label:hover .char2,
#email-signup-label:hover .char3,
#email-signup-label:hover .char4,
#email-signup-label:hover .char5,
#email-signup-label:hover .char6,
#email-signup-label:hover .char7,
#email-signup-label:hover .char8,
#email-signup-label:hover .char9,
#email-signup-label:hover .char10,
#email-signup-label:hover .char11,
#email-signup-label:hover .char12,
#email-signup-label:hover .char13,
#email-signup-label:hover .char14,
#email-signup-label:hover .char15,
#email-signup-label:hover .char16,
#email-signup-label:hover .char17,
#email-signup-label:hover .char19,
#email-signup-label:hover .char20,
#email-signup-label:hover .char21,
#email-signup-label:hover .char22,
#email-signup-label:hover .char23,
#email-signup-label:hover .char24,
#email-signup-label:hover .char25,
#email-signup-label:hover .char26,
#email-signup-label:hover .char27,
#email-signup-label:hover .char28,
#email-signup-label:hover .char29,
#email-signup-label:hover .char30,
#email-signup-label:hover .char31,
#email-signup-label:hover .char32,
#email-signup-label:hover .char33,
#email-signup-label:hover .char34,
#email-signup-label:hover .char35,
#email-signup-label:hover .char36,
#email-signup-label:hover .char37,
#email-signup-label:hover .char38,
#email-signup-label:hover .char39,
#email-signup-label:hover .char40,
#email-signup-label:hover .char41,
#email-signup-label:hover .char42,
#email-signup-label:hover .char43,
#email-signup-label:hover .char44,
#email-signup-label:hover .char45,
#email-signup-label:hover .char46,
#email-signup-label:hover .char47,
#email-signup-label:hover .char48
{
	/* Shared properties. */
	opacity:0.5;
	-webkit-transition:all 0.5s ease-out;
	   -moz-transition:all 0.5s ease-out;
	        transition:all 0.5s ease-out;
}

/* The .char__ classes below are the specific
   coordinates for each character. On hover 
   they are activated and each letter is 
   transitioned to its new coordinates. They 
   return to their default coordinates when
   the :hover pseudo-class is deactivated. Do 
   you know how long it took me to format it 
   like this?*
   
   You're welcome.
   
   Hat tip: http://dropshado.ws/post/2054719546/css-formatting
*/

#email-signup-label:hover .char1
{
	-webkit-transform: translate3d( -100px, -100px, 0 );
	   -moz-transform: translate(   -100px, -100px    );
	        transform: translate(   -100px, -100px    );
}

#email-signup-label:hover .char2
{ 
	-webkit-transform: translate3d( -60px, -100px, 0 );
	   -moz-transform: translate(   -60px, -100px    );
	        transform: translate(   -60px, -100px    );
}

#email-signup-label:hover .char3
{ 
	-webkit-transform: translate3d( 100px, -80px, 0 );
	   -moz-transform: translate(   100px, -80px    );
	        transform: translate(   100px, -80px    );
}

#email-signup-label:hover .char4
{ 
	-webkit-transform: translate3d( -100px, 100px, 0 );
	   -moz-transform: translate(   -100px, 100px    );
	        transform: translate(   -100px, 100px    );
}

#email-signup-label:hover .char5
{ 
	-webkit-transform: translate3d( -130px, 70px, 0 );
	   -moz-transform: translate(   -130px, 70px    );
	        transform: translate(   -130px, 70px    );
}

#email-signup-label:hover .char6
{ 
	-webkit-transform: translate3d( -30px, -100px, 0 );
	   -moz-transform: translate(   -30px, -100px    );
	        transform: translate(   -30px, -100px    );
}

#email-signup-label:hover .char7
{ 
	-webkit-transform: translate3d( 140px, -100px, 0 );
	   -moz-transform: translate(   140px, -100px    );
	        transform: translate(   140px, -100px    );
}

#email-signup-label:hover .char8
{ 
	-webkit-transform: translate3d( -20px, -160px, 0 );
	   -moz-transform: translate(   -20px, -160px    );
	        transform: translate(   -20px, -160px    );
}

#email-signup-label:hover .char9
{ 
	-webkit-transform: translate3d( -100px, 120px, 0 );
	   -moz-transform: translate(   -100px, 120px    );
	        transform: translate(   -100px, 120px    );
}

#email-signup-label:hover .char10
{ 
	-webkit-transform: translate3d( 10px, 150px, 0 );
	   -moz-transform: translate(   10px, 150px    );
	        transform: translate(   10px, 150px    );
}

#email-signup-label:hover .char11
{ 
	-webkit-transform: translate3d( 30px, 120px, 0 );
	   -moz-transform: translate(   30px, 120px    );
	        transform: translate(   30px, 120px    );
}

#email-signup-label:hover .char12
{ 
	-webkit-transform: translate3d( 20px, -80px, 0 );
	   -moz-transform: translate(   20px, -80px    );
	        transform: translate(   20px, -80px    );
}

#email-signup-label:hover .char13
{ 
	-webkit-transform: translate3d( -50px, -150px, 0 );
	   -moz-transform: translate(   -50px, -150px    );
	        transform: translate(   -50px, -150px    );
}

#email-signup-label:hover .char14
{ 
	-webkit-transform: translate3d( -130px, 70px, 0 );
	   -moz-transform: translate(   -130px, 70px    );
	        transform: translate(   -130px, 70px    );
}

#email-signup-label:hover .char15
{ 
	-webkit-transform: translate3d( 10px, -125px, 0 );
	   -moz-transform: translate(   10px, -125px    );
	        transform: translate(   10px, -125px    );
}

#email-signup-label:hover .char16
{ 
	-webkit-transform: translate3d( -140px, -100px, 0 );
	   -moz-transform: translate(   -140px, -100px    );
	        transform: translate(   -140px, -100px    );
}

#email-signup-label:hover .char17
{ 
	-webkit-transform: translate3d( 20px, -70px, 0 );
	   -moz-transform: translate(   20px, -70px    );
	        transform: translate(   20px, -70px    );
}

#email-signup-label:hover .char18
{ 
	-webkit-transform: translate3d( -100px, 120px, 0 );
	   -moz-transform: translate(   -100px, 120px    );
	        transform: translate(   -100px, 120px    );
}

#email-signup-label:hover .char19
{ 
	-webkit-transform: translate3d( -50px, -200px, 0 );
	   -moz-transform: translate(   -50px, -200px    );
	        transform: translate(   -50px, -200px    );
}

#email-signup-label:hover .char20
{ 
	-webkit-transform: translate3d( 35px, -160px, 0 );
	   -moz-transform: translate(   35px, -160px    );
	        transform: translate(   35px, -160px    );
}

#email-signup-label:hover .char21
{ 
	-webkit-transform: translate3d( -35px, 175px, 0 );
	   -moz-transform: translate(   -35px, 175px    );
	        transform: translate(   -35px, 175px    );
}

#email-signup-label:hover .char22
{ 
	-webkit-transform: translate3d( -70px, -50px, 0 );
	   -moz-transform: translate(   -70px, -50px    );
	        transform: translate(   -70px, -50px    );
}

#email-signup-label:hover .char23
{ 
	-webkit-transform: translate3d( -35px, -100px, 0 );
	   -moz-transform: translate(   -35px, -100px    );
	        transform: translate(   -35px, -100px    );
}

#email-signup-label:hover .char24
{ 
	-webkit-transform: translate3d( 20px, 140px, 0 );
	   -moz-transform: translate(   20px, 140px    );
	        transform: translate(   20px, 140px    );
}

#email-signup-label:hover .char25
{ 
	-webkit-transform: translate3d( 30px, -240px, 0 );
	   -moz-transform: translate(   30px, -240px    );
	        transform: translate(   30px, -240px    );
}

#email-signup-label:hover .char26
{ 
	-webkit-transform: translate3d( -90px, -30px, 0 );
	   -moz-transform: translate(   -90px, -30px    );
	        transform: translate(   -90px, -30px    );
}

#email-signup-label:hover .char27
{ 
	-webkit-transform: translate3d( 15px, -125px, 0 );
	   -moz-transform: translate(   15px, -125px    );
	        transform: translate(   15px, -125px    );
}

#email-signup-label:hover .char28
{ 
	-webkit-transform: translate3d( 40px, 210px, 0 );
	   -moz-transform: translate(   40px, 210px    );
	        transform: translate(   40px, 210px    );
}

#email-signup-label:hover .char29
{ 
	-webkit-transform: translate3d( -140px, 70px, 0 );
	   -moz-transform: translate(   -140px, 70px    );
	        transform: translate(   -140px, 70px    );
}

#email-signup-label:hover .char30
{ 
	-webkit-transform: translate3d( -18px, 230px, 0 );
	   -moz-transform: translate(   -18px, 230px    );
	        transform: translate(   -18px, 230px    );
}

#email-signup-label:hover .char31
{ 
	-webkit-transform: translate3d( 20px, -100px, 0 );
	   -moz-transform: translate(   20px, -100px    );
	        transform: translate(   20px, -100px    );
}

#email-signup-label:hover .char32
{ 
	-webkit-transform: translate3d( -40px, -70px, 0 );
	   -moz-transform: translate(   -40px, -70px    );
	        transform: translate(   -40px, -70px    );
}

#email-signup-label:hover .char33
{ 
	-webkit-transform: translate3d( -20px, -140px, 0 );
	   -moz-transform: translate(   -20px, -140px    );
	        transform: translate(   -20px, -140px    );
}

#email-signup-label:hover .char34
{ 
	-webkit-transform: translate3d( 70px, 140px, 0 );
	   -moz-transform: translate(   70px, 140px    );
	        transform: translate(   70px, 140px    );
}

#email-signup-label:hover .char35
{ 
	-webkit-transform: translate3d( -20px, 90px, 0 );
	   -moz-transform: translate(   -20px, 90px    );
	        transform: translate(   -20px, 90px    );
}

#email-signup-label:hover .char36
{ 
	-webkit-transform: translate3d( 120px, 100px, 0 );
	   -moz-transform: translate(   120px, 100px    );
	        transform: translate(   120px, 100px    );
}

#email-signup-label:hover .char37
{ 
	-webkit-transform: translate3d( -100px, -120px, 0 );
	   -moz-transform: translate(   -100px, -120px    );
	        transform: translate(   -100px, -120px    );
}

#email-signup-label:hover .char38
{ 
	-webkit-transform: translate3d( 50px, -80px, 0 );
	   -moz-transform: translate(   50px, -80px    );
	        transform: translate(   50px, -80px    );
}

#email-signup-label:hover .char39
{ 
	-webkit-transform: translate3d( 50px, -180px, 0 );
	   -moz-transform: translate(   50px, -180px    );
	        transform: translate(   50px, -180px    );
}

#email-signup-label:hover .char40
{ 
	-webkit-transform: translate3d( -90px, 120px, 0 );
	   -moz-transform: translate(   -90px, 120px    );
	        transform: translate(   -90px, 120px    );
}

#email-signup-label:hover .char41
{ 
	-webkit-transform: translate3d( 10px, -80px, 0 );
	   -moz-transform: translate(   10px, -80px    );
	        transform: translate(   10px, -80px    );
}

#email-signup-label:hover .char42
{ 
	-webkit-transform: translate3d( -100px, -100px, 0 );
	   -moz-transform: translate(   -100px, -100px    );
	        transform: translate(   -100px, -100px    );
}

#email-signup-label:hover .char43
{ 
	-webkit-transform: translate3d( -140px, 100px, 0 );
	   -moz-transform: translate(   -140px, 100px    );
	        transform: translate(   -140px, 100px    );
}

#email-signup-label:hover .char44
{ 
	-webkit-transform: translate3d( -30px, 110px, 0 );
	   -moz-transform: translate(   -30px, 110px    );
	        transform: translate(   -30px, 110px    );
}

#email-signup-label:hover .char45
{ 
	-webkit-transform: translate3d( 120px, 160px, 0 );
	   -moz-transform: translate(   120px, 160px    );
	        transform: translate(   120px, 160px    );
}

#email-signup-label:hover .char46
{ 
	-webkit-transform: translate3d( 30px, -210px, 0 );
	   -moz-transform: translate(   30px, -210px    );
	        transform: translate(   30px, -210px    );
}

#email-signup-label:hover .char47
{ 
	-webkit-transform: translate3d( -90px, -170px, 0 );
	   -moz-transform: translate(   -90px, -170px    );
	        transform: translate(   -90px, -170px    );
}

#email-signup-label:hover .char48
{ 
	-webkit-transform: translate3d( -10px, 90px, 0 );
	   -moz-transform: translate(   -10px, 90px    );
	        transform: translate(   -10px, 90px    );
}

/* *Actually it wasn't that long. */