Animate conent

dabblet.css

#holder {
position:relative;
width:700px;
height:200px;
margin:auto;
border:10px solid #000;
overflow:hidden;}

.panel {
position:absolute;
width:680px;
height:180px;
padding:10px;
overflow:hidden;}

#panel1 {
top:0;
left:0;
background:blue;}

#panel2 {
top:200px;
left:0;
background:red;}

#holdall {
position:absolute;
width:0;
height:0;
background:white;
-webkit-transition: all 1s ease-out;}

#loadpanel2:target #holdall {
-webkit-transform: translateY(-200px);
}

#loadpanel1:target #holdall {
-webkit-transform:translateY(0px);

dabblet.html

<div id="container">
<ul> 
<li><a href="#loadpanel1">Load Panel 1</li>
<li><a href="#loadpanel2">Load Panel 2</li>
</ul>
<div id="holder">
<div id="loadpanel1">
<div id="loadpanel2">
<div id="holdall">
	<div id="panel1" class="panel">
	</div>
	<div id="panel2" class="panel">
	</div>
</div>
</div>
</div>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}