argyleink/dabblet.css

## dabblet.css
/**
 * Basic CSS Animation
 */
body,html{
			height:100%;width:100%;
	margin:0;padding:0;
}
.hello{
	display: block;
	height:500px;
	width:500px;
	position: absolute;
	top:50px;
	left:50px;
	background-color: #666;
	color: #fff;
	font-size:100px;
	line-height:500px;
	text-align: center;
	font-family: Arial;
	text-decoration: none;
	-webkit-transition: all 1s ease;
}
.goodbye{
	display: block;
	height:200px;
	width:200px;
	position: absolute;
	top:100px;
	left:50px;
	background-color: red;
	-webkit-transition: all 1s ease;
}
.hello:hover{
	left: 400px;
	background-color: #ccc;
}
.hello:hover .goodbye{
	left: 400px;
	background-color: #ccc;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
	<li style="margin-top:30px; margin-bottom:0;">Home</li>
	<li>Slavery</li>
	<li>Hunger</li>
	<li>Video Games</li>
	<li>FML</li>
</ul>

<div class="box"></div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Basic CSS Animation
	*/
	body,html{
	height:100%;width:100%;
	margin:0;padding:0;
	}
	.hello{
	display: block;
	height:500px;
	width:500px;
	position: absolute;
	top:50px;
	left:50px;
	background-color: #666;
	color: #fff;
	font-size:100px;
	line-height:500px;
	text-align: center;
	font-family: Arial;
	text-decoration: none;
	-webkit-transition: all 1s ease;
	}
	.goodbye{
	display: block;
	height:200px;
	width:200px;
	position: absolute;
	top:100px;
	left:50px;
	background-color: red;
	-webkit-transition: all 1s ease;
	}
	.hello:hover{
	left: 400px;
	background-color: #ccc;
	}
	.hello:hover .goodbye{
	left: 400px;
	background-color: #ccc;
	}
	<!-- content to be placed inside <body>…</body> -->
	<ul>
	<li style="margin-top:30px; margin-bottom:0;">Home</li>
	<li>Slavery</li>
	<li>Hunger</li>
	<li>Video Games</li>
	<li>FML</li>
	</ul>

	<div class="box"></div>