Basic CSS Animation

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

<a href="#" class="hello">
	hello
	<div class="goodbye">bye</div>
</a>

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

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}