vasilisvg/dabblet.css

## dabblet.css
/**
 * Transitions
 */

div:last-of-type {
	transition: 1s ease; /* ease, linear, ease-in, ease-in-out, ease-out */
	/* Zoek ook eens op http://cubic-bezier.com/
	Of op http://matthewlein.com/ceaser/
	  */
	top: 12vw;
	background: hotpink;
}

article:hover div:last-of-type {
	//transition: ;
}

article {
	margin: 4em 0 0;
	width: 90vw;
	height: 30vw;
	position: relative;
}

article:hover div {
	left: 85vw;
	color: white;
	//transform: rotate(360deg);
}

div {
	width: 10vw;
	height: 10vw;
	background: grey;
	margin: .3em;
	transition: 1s;
	position: absolute;
	left: 0;
	text-align: center;
	line-height: 10vw;
	font-size: 3em;
}

ul {
	clear: ;
}

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


<article>
<div>A</div>
<div>B</div>
</article>

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

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Transitions
	*/

	div:last-of-type {
	transition: 1s ease; /* ease, linear, ease-in, ease-in-out, ease-out */
	/* Zoek ook eens op http://cubic-bezier.com/
	Of op http://matthewlein.com/ceaser/
	*/
	top: 12vw;
	background: hotpink;
	}

	article:hover div:last-of-type {
	//transition: ;
	}

	article {
	margin: 4em 0 0;
	width: 90vw;
	height: 30vw;
	position: relative;
	}

	article:hover div {
	left: 85vw;
	color: white;
	//transform: rotate(360deg);
	}

	div {
	width: 10vw;
	height: 10vw;
	background: grey;
	margin: .3em;
	transition: 1s;
	position: absolute;
	left: 0;
	text-align: center;
	line-height: 10vw;
	font-size: 3em;
	}

	ul {
	clear: ;
	}
	<!-- content to be placed inside <body>…</body> -->


	<article>
	<div>A</div>
	<div>B</div>
	</article>