MichaelArestad/dabblet.css

## dabblet.css
/**
 Relative Position Animation Test
 */
html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
}
#absolute {
	width: 100%;
	height: 600px;
}
#position {
	position: relative;
	top:30px;
	left: 30px;
	background: red;

	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
#absolute:hover #position {
	top:300px;
	right: 300px;
}

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

<div id="absolute">
<p id="position">Test</p>
</div>

## settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
	/**
	Relative Position Animation Test
	*/
	html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}
	#absolute {
	width: 100%;
	height: 600px;
	}
	#position {
	position: relative;
	top:30px;
	left: 30px;
	background: red;

	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	}
	#absolute:hover #position {
	top:300px;
	right: 300px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<div id="absolute">
	<p id="position">Test</p>
	</div>