Simple way to animate content

dabblet.css

/*Dynamic content system */
#view {
position:relative;
width:900px;
height:200px;
margin:auto;
border:5px dashed #000;
overflow:hidden;}

#holder {
position:absolute;
width:0px;
height:0px;
-webkit-transition: 2s all linear;}

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

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

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

#loadpanel2:target #holder {
-webkit-transform: translateX(-900px) translateY(-200px);}

dabblet.html

<ol>
<li><a href="#loadpanel1">Load Panel 1</a></li>
<li><a href="#loadpanel2">Load Panel 2</a></li>
</ol>


	<div id="view">
		<div id="loadpanel1">
			<div id="loadpanel2">
				<div id="holder">
					<div id="panel1" class="panel">Welcome to panel 1
					</div>
					<div id="panel2" class="panel">
					</div>
				</div>
			</div>
		</div>

</div>

dabblet.js

// alert('Hello world!');

settings.json

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