Re-creating Bref style with CSS3 animation

dabblet.css

/* Re-creating Bref style with CSS3 animation */

html, body { margin:0 auto; padding:0; color:#fff; background-color:#444; font-size:18px; line-height:1.5; font-family:Trocchi, Serif; text-align:center; }
body { padding-top:100px; }

a		{ color:rgb(252, 96, 0); transition:all .3s linear; }
a:hover	{ color:rgb(232, 199, 69); }
ul		{ margin:0 auto; padding:0; list-style:none; clear:both; overflow:hidden; width:100%; }

.wrapper { margin:0 auto 40px; width:400px; padding:0; position:relative; transform:scale(2); }
.wrapper:before,
.wrapper:after { content:""; position:absolute; z-index:-1; bottom:15px; left:10px; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); }
.wrapper:after { right:10px; left:auto; transform:rotate(3deg); }

.wrapper * { animation:intro .3s 1 ease-out both; }
.wrapper > div { position:absolute; top:0; left:0; margin:0 auto 5px; width:380px; height:150px; padding:10px; background-color:#000; border-radius:3px; z-index:3; overflow:hidden; }
.wrapper > div:nth-of-type(1) { padding:40px 50px 10px; width:300px; height:120px; font-size:28px; }

.wrapper > div:nth-of-type(2)			{ padding:40px 50px 10px; width:300px; height:120px; line-height:1.5; animation-delay:2s; }
.wrapper > div:nth-of-type(2) span		{ display:block; margin-left:auto; margin-right:auto; font-size:24px; overflow:hidden; white-space:nowrap; animation-delay:2s; }
.wrapper > div:nth-of-type(2) strong	{ display:block; margin:3px auto; font-size:48px; animation-delay:3s; }

.wrapper > div:nth-of-type(3)					{ padding:0; width:400px; height:170px; animation-delay:4s;  }
.wrapper > div:nth-of-type(3) ul		 		{ position:relative; height:100%; }
.wrapper > div:nth-of-type(3) li				{ position:absolute; }
.wrapper > div:nth-of-type(3) li:nth-of-type(1)	{ top:0; right:30px; font-size:40px; animation-delay:4s; }
.wrapper > div:nth-of-type(3) li:nth-of-type(2) { bottom:20px; right:50px; animation-delay:4.5s; }
.wrapper > div:nth-of-type(3) li:nth-of-type(3) { top:0px; left:5px; font-size:12px; animation-delay:5s; }
.wrapper > div:nth-of-type(3) li:nth-of-type(4) { top:40px; left:5px; font-size:32px; animation-delay:5.5s; }
.wrapper > div:nth-of-type(3) li:nth-of-type(5) { top:70px; left:50px; font-size:42px; animation-delay:6s; }

.wrapper > div:nth-of-type(4)					{ padding:50px 0 10px; width:400px; height:110px; font-size:26px; animation-delay:6.5s; }
.wrapper > div:nth-of-type(4) li				{ float:left; width:31%; margin:0 1%; text-transform:uppercase; }
.wrapper > div:nth-of-type(4) li:nth-of-type(1)	{ text-align:right; animation-delay:6.5s; }
.wrapper > div:nth-of-type(4) li:nth-of-type(2)	{ width:32%; margin:0 1%; text-align:center; animation-delay:7s; }
.wrapper > div:nth-of-type(4) li:nth-of-type(3) { text-align:left; animation-delay:7.5s; }

.wrapper > div:nth-of-type(5)					{ padding:40px 10px 10px; width:380px; height:120px; animation-delay:8.5s; }
.wrapper > div:nth-of-type(5) ul				{ margin-bottom:10px; }
.wrapper > div:nth-of-type(5) li				{ float:left; width:30%; margin:0 1%; }
.wrapper > div:nth-of-type(5) li:nth-of-type(1)	{ text-align:right; animation-delay:9s; }
.wrapper > div:nth-of-type(5) li:nth-of-type(2)	{ text-align:center; float:left; width:34%; margin:0 1%; animation-delay:9.5s; }
.wrapper > div:nth-of-type(5) li:nth-of-type(3)	{ text-align:left; animation-delay:10s; }
.wrapper > div:nth-of-type(5) div				{ margin-left:auto; margin-right:auto; font-size:24px; animation-delay:11s; overflow:hidden; white-space:nowrap; }

.wrapper > div:nth-of-type(6)			{ padding:20px 10px 10px; width:380px; height:140px; animation-delay:12s; transition:all 1s linear; }
.wrapper > div:nth-of-type(6) strong	{ font-size:50px; font-weight:bold; display:block; }
.wrapper > div:nth-of-type(6) span		{ display:block; animation:intro .3s 1 ease-out both, heartbeat 1s 3 linear forwards; animation-delay:13s; }
.wrapper > div:nth-of-type(6) em		{ font-weight:bold; font-style:normal; }

.cssanimations .wrapper * { opacity:0; } /* thanks to modernizr /**/

@keyframes intro { 
	to { opacity:1;  }
}

@keyframes heartbeat {
	0%   { transform:scale(1); }
	20%  { transform:scale(1.2); }
	30%  { transform:scale(1.1); }
	40%  { transform:scale(1.2); }
	60%  { transform:scale(1); }
	100% { transform:scale(1); }
}

dabblet.html

<p>A regarder avec un navigateur qui supporte l'<a href="https://developer.mozilla.org/en/CSS/animation" target="_blank">animation via CSS</a></p>

<div class="wrapper">
	<div>J'ai voulu cr&eacute;er une Web App.</div>

	<div>
		<span>directement j'ai pens&eacute;:</span>
		<strong>HTML5</strong>
	</div>
	
	<div>
		<ul>
			<li>Geolocatisation</li>
			<li>Locale Storage</li>
			<li>Web Workers</li>
			<li>Web Sockets</li>
			<li>IndexedDB</li>
		</ul>
	</div>
	
	<div>
		<ul>
			<li>Canvas</li>
			<li>SVG</li>
			<li>WebGL</li>
		</ul>
	</div>
	
	<div>
		<ul>
			<li>J'ai mat&eacute;.</li> 
			<li>J'ai test&eacute;.</li> 
			<li>J'ai bidouill&eacute;</li>
		</ul>
		<div>Je me suis fait un max de bl&eacute;</div>
	</div>

	<div>
		<strong>bref.</strong>
		<span>Je suis un Webdevelopper</span>
	</div>
</div><!-- /.wrapper -->

settings.json

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