MichaelArestad/dabblet.css

## dabblet.css
/**
 font-size, line-height, and letter-spacing Animation Test
 */
html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}
#absolute {
	width: 100%;
	height: 600px;
}
#position {
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0px;

	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}
#absolute:hover #position {
	font-size: 80px;
	line-height: 140px;
	letter-spacing: 30px;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div id="absolute">
<p id="position">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
</div>

## settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
	/**
	font-size, line-height, and letter-spacing Animation Test
	*/
	html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}
	#absolute {
	width: 100%;
	height: 600px;
	}
	#position {
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0px;

	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-ms-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
	}
	#absolute:hover #position {
	font-size: 80px;
	line-height: 140px;
	letter-spacing: 30px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<div id="absolute">
	<p id="position">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.</p>
	</div>