layout

dabblet.css

div {opacity:0;animation:5s hide 1 ;}
@keyframes hide {
0%,80% {opacity:1;}
100% {opacity:0;}
}




/* layout */
html, body {height:100%;width:100%;display:table;border-spacing:0;background:orange;margin:0;}
div {display:table-cell;vertical-align:middle;text-align:center;background:rgba(0,0,0,0.3);}

dabblet.html

<div>
	<h1>Salut le monde !</h1>	
	<img src="http://lorempixel.com/200/200/people" />
	<p>rafraichissez la page pour relancer l'animation.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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