cedricici/dabblet.css

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

div p{
background:rgba(0,0,0,.2);
height:100px;
margin:100px 110px 0 0;
position:relative;
}
div 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:10px;
transition-property:left,right;
transition-duration:2s;
transition-timing-function:cubic-bezier(0.2,1,0.8,-1);
transition-delay:.1s;
}

div p:hover a{
left:100%;
transition-timing-function:steps(5,start);
}


nav p{
background:rgba(0,0,0,.2);
height:100px;
margin:100px 110px 0 0;
position:relative;
}


nav p a{
display:block;
position:absolute;
width:100px;
height:100px;
text-align:center;
padding-top:2.5em;
box-sizing:border-box;
text-decoration:none;
border:1px solid #000;
border-radius:50px;
background:#777;
box-shadow:2px 2px 10px #000;
left:10px;
/*
animation-name:move_x,move_y;
animation-duration:3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-direction:alternate;

animation-fill-mode:backwards;
*/
animation:move_x 5s linear infinite alternate ,move_y 5s linear  infinite alternate ;

}
/*
nav p a:active{
animation-play-state:running;
animation-iteration-count:infinite;
}
*/


@keyframes move_x {
0% {
left:0;
}

100%{
left:100%;
}
}
@keyframes move_y {
0% {
bottom:0;
animation-timing-function:cubic-bezier(0,.5,.5,1);
}
50% {
bottom:300px;
animation-timing-function:cubic-bezier(.5,0,1,.5);
}
100%{
bottom:0;
}
}


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


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


<nav>
<p><a href="#">animated</a></p>
</nav>

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

	div p{
	background:rgba(0,0,0,.2);
	height:100px;
	margin:100px 110px 0 0;
	position:relative;
	}
	div 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:10px;
	transition-property:left,right;
	transition-duration:2s;
	transition-timing-function:cubic-bezier(0.2,1,0.8,-1);
	transition-delay:.1s;
	}

	div p:hover a{
	left:100%;
	transition-timing-function:steps(5,start);
	}


	nav p{
	background:rgba(0,0,0,.2);
	height:100px;
	margin:100px 110px 0 0;
	position:relative;
	}


	nav p a{
	display:block;
	position:absolute;
	width:100px;
	height:100px;
	text-align:center;
	padding-top:2.5em;
	box-sizing:border-box;
	text-decoration:none;
	border:1px solid #000;
	border-radius:50px;
	background:#777;
	box-shadow:2px 2px 10px #000;
	left:10px;
	/*
	animation-name:move_x,move_y;
	animation-duration:3s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
	animation-direction:alternate;

	animation-fill-mode:backwards;
	*/
	animation:move_x 5s linear infinite alternate ,move_y 5s linear infinite alternate ;

	}
	/*
	nav p a:active{
	animation-play-state:running;
	animation-iteration-count:infinite;
	}
	*/


	@keyframes move_x {
	0% {
	left:0;
	}

	100%{
	left:100%;
	}
	}
	@keyframes move_y {
	0% {
	bottom:0;
	animation-timing-function:cubic-bezier(0,.5,.5,1);
	}
	50% {
	bottom:300px;
	animation-timing-function:cubic-bezier(.5,0,1,.5);
	}
	100%{
	bottom:0;
	}
	}
	<!-- content to be placed inside <body>…</body> -->


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


	<nav>
	<p><a href="#">animated</a></p>
	</nav>