cedricici/dabblet.css

## dabblet.css
/**
 * Transition
 */
body{
padding:0;
background:linear-gradient(-45deg, darkblue, aqua);
height:400px;
}

p{
background:rgba(0,0,0,.2);
height:100px;
margin:100px 110px 0 0;
position:relative;
}
p a{
display:table-cell;
position:absolute;
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
text-decoration:none;
border:1px solid #000;
background:#777;
box-shadow:2px 2px 10px #000;
left:0%;
transition-property:left,right;
transition-duration:2s;
transition-timing-function:cubic-bezier(0.2,1,0.8,-1);
transition-delay:.1s;
}

p:hover a{
left:100%;
transition-duration:1s;
transition-timing-function:cubic-bezier(0.1,1.2,.6,1.1);/*steps(5,start)*/
;

}


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


<div>
<p><a href="#">texte</a></p>
</div>

## settings.json
{"view":"split","prefixfree":"1","page":"css"}
	/**
	* Transition
	*/
	body{
	padding:0;
	background:linear-gradient(-45deg, darkblue, aqua);
	height:400px;
	}

	p{
	background:rgba(0,0,0,.2);
	height:100px;
	margin:100px 110px 0 0;
	position:relative;
	}
	p a{
	display:table-cell;
	position:absolute;
	width:100px;
	height:100px;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	border:1px solid #000;
	background:#777;
	box-shadow:2px 2px 10px #000;
	left:0%;
	transition-property:left,right;
	transition-duration:2s;
	transition-timing-function:cubic-bezier(0.2,1,0.8,-1);
	transition-delay:.1s;
	}

	p:hover a{
	left:100%;
	transition-duration:1s;
	transition-timing-function:cubic-bezier(0.1,1.2,.6,1.1);/steps(5,start)/
	;

	}
	<!-- content to be placed inside <body>…</body> -->


	<div>
	<p><a href="#">texte</a></p>
	</div>