ffoodd/dabblet.css

## dabblet.css
/**
 * animations
 */
@keyframes descente-1 {
 	from {
 		transform: translate3d( -.5rem, -.5rem, 0 ) rotate( 5deg );
 	} to {
 		transform: none;
 	}
}

@keyframes descente-2 {
	from {
  		transform: none;
 	} to {
  		transform: translate3d( .5rem, .5rem, 0 );
 	}
}

@keyframes descente-3 {
	from {
		transform: translate3d( -.5rem, -.5rem, 0 );
	} to {
		transform: translate3d( .5rem, .5rem, 0 );
 	}
}

@keyframes escalade-1 {
	from {
  		transform: translate3d( .5rem, .5rem, 0 );
  	} to {
  		transform: none;
  }
}

@keyframes escalade-2 {
	from {
  	 	transform: none;
  	} to {
  	 	transform: translate3d( -.5rem, -.5rem, 0 );
  	}
}

@keyframes escalade-3 {
	from {
  	 	transform: translate3d( .5rem, .5rem, 0 );
  	} to {
  	 	transform: translate3d( -.5rem, -.5rem, 0 );
  	 }
}

body {
 	background: #eee;
 }

ul {
	list-style: none;
	/*   * The fix for WebKit/Blink browsers.   */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

li {
	animation-fill-mode: forwards;
	animation-duration: .3s;
	animation-timing-function: ease-in;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 5px;
	/* @see http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ */
	outline: 1px solid transparent;
	/*   * The fix for WebKit/Blink browsers.   */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
	margin: 0;
	padding: .5em;
	max-width: 20vw;
}

li:first-child {
	transform: translate3d( -.5rem, -.5rem, 0 ) rotate( 5deg );
}

li:first-child:hover {
	animation-name: descente-1;
}

li:not(:first-child):not(:last-child) {
	transform: none;
}

li:not(:first-child):not(:last-child):hover {
	animation-name: descente-2;
}

li:last-child {
	transform: translate3d( .5rem, .5rem, 0 );
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<ul>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	<li>Bananaaaaa</li>
</ul>

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

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* animations
	*/
	@keyframes descente-1 {
	from {
	transform: translate3d( -.5rem, -.5rem, 0 ) rotate( 5deg );
	} to {
	transform: none;
	}
	}

	@keyframes descente-2 {
	from {
	transform: none;
	} to {
	transform: translate3d( .5rem, .5rem, 0 );
	}
	}

	@keyframes descente-3 {
	from {
	transform: translate3d( -.5rem, -.5rem, 0 );
	} to {
	transform: translate3d( .5rem, .5rem, 0 );
	}
	}

	@keyframes escalade-1 {
	from {
	transform: translate3d( .5rem, .5rem, 0 );
	} to {
	transform: none;
	}
	}

	@keyframes escalade-2 {
	from {
	transform: none;
	} to {
	transform: translate3d( -.5rem, -.5rem, 0 );
	}
	}

	@keyframes escalade-3 {
	from {
	transform: translate3d( .5rem, .5rem, 0 );
	} to {
	transform: translate3d( -.5rem, -.5rem, 0 );
	}
	}

	body {
	background: #eee;
	}

	ul {
	list-style: none;
	/* * The fix for WebKit/Blink browsers. */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	}

	li {
	animation-fill-mode: forwards;
	animation-duration: .3s;
	animation-timing-function: ease-in;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 5px;
	/* @see http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ */
	outline: 1px solid transparent;
	/* * The fix for WebKit/Blink browsers. */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	font-smoothing: subpixel-antialiased;
	margin: 0;
	padding: .5em;
	max-width: 20vw;
	}

	li:first-child {
	transform: translate3d( -.5rem, -.5rem, 0 ) rotate( 5deg );
	}

	li:first-child:hover {
	animation-name: descente-1;
	}

	li:not(:first-child):not(:last-child) {
	transform: none;
	}

	li:not(:first-child):not(:last-child):hover {
	animation-name: descente-2;
	}

	li:last-child {
	transform: translate3d( .5rem, .5rem, 0 );
	}
	<!-- content to be placed inside <body>…</body> -->
	<ul>
	<li>Lorem ipsum</li>
	<li>Dolor sit amet</li>
	<li>Bananaaaaa</li>
	</ul>