First, create the keyframes behavior

dabblet.css

body{background:#999;
color:#fff;
width:100%;
height:100%;}

#bucket{
width:100%;
height:100%;}


#con{
height:500px;
width:300px;
margin:auto;
margin-top:50px;
background:rgba(0,0,0,0.1);
}

#start_panel{
width:100%;
height:100%;
background:#fff;
}

#start_panel a{
text-align:center;
color:#000;
text-decoration:none;
font-size:32px;
width:100px;
margin:auto;}

/* First, create the keyframes behavior */

@-webkit-keyframes G_down {
	0%   { height:100%; }
	100% { height: 10%; }
}
@-moz-keyframes G_down {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@-ms-keyframes G_down {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

  @-webkit-keyframes G_in {
    from {
    margin-top:0%;
    }
    
    to {
    margin-top:500PX;

    }
  }
/* Then apply your animation to the element */

#start_panel:target {     
     -webkit-animation: G_in 5s ease;
     -moz-animation:    G_down 5s infinite;
     -ms-animation:     G_down 5s infinite;
}

dabblet.html

<div id="bucket">
	<div id="con" class="close">
		<div class="onof" id="start_panel">
			<a href="#start_panel" class="shutter">O|1</a>
		</div>
	</div>
</div>

settings.json

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