Animation example with :target

dabblet.css

/**
 * Path icon hover
 *
 * Example of the desired effect (hover over the user avatar) https://path.com/p/5Eplz
 * 
 * Close, but annoying that the animation runs on page load. 
 * Possible solution could be to fade entire page content in while initial 
 * animation runs.
 */
 
 * {
 margin: 0;
 padding: 0;
 }
 
html {
	min-height: 100%;
}

body {
	min-height: 100%;
	background: #555 linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.4));
	background-size: cover;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

a[href="#detail"] {
	display: block;
	width: 150px;
	height: 16px;
	padding: 80px 0 100px;
	text-align: center;
	margin: 50px auto;
	background: #345 linear-gradient(rgba(0,0,100,0), rgba(0,0,10,.4));
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.5em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px rgba(255,255,255,.2), 0 2px 3px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.2);;
}

#detail {
	position: fixed;
	width: 400px;
	height: 500px;
	top: 50%;
	margin-top: -270px;
	left: 50%;
	margin-left: -220px;
	background: #fff;
	padding: 20px;
	border-radius: 5px;
	transform: perspective(1000px) rotateY(180deg) scale(.1);
	opacity: 0;
	transition: .8s ease;
}

#detail:target {	
	transform: perspective(1000px) rotateY(0deg) scale(1);
	opacity: 1;
}

dabblet.html

<a class="site" href="#detail">
	Site
</a>

<div id="detail">
	<h1>Hey, check it.</h1>
	<p>Well I'da done better, but it's plum hard pleading a case while awaiting trial for that there incompetence. No, of course not. It was… uh… porno. Yeah, that's it. Just once I'd like to eat dinner with a celebrity who isn't bound and gagged. Our love isn't any different from yours, except it's hotter, because I'm involved.</p>
	<a href="#close">Close</a>
</div>

settings.json

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