my first dabblet

dabblet.css

/**
 * my first dabblet
 */
body{
	background: #444;
	margin: 200px auto;
	width:1000px;
	}
#play-but{
	cursor:pointer;
	float:left;
	width:0;
	height:0;
	margin-top:1px;
	border-top: 9px solid transparent;
	border-left: 18px solid #FFF;
	border-bottom: 9px solid transparent;
}

#pause-but{
	width: 6px;
	height: 17px;
	/*background: red;*/
	float: left;
	border: 4px solid #333;
	border-width: 0 4px;
	
}

#play,#pause{
	/*display:none;*/
}

#prog-bar{
	float:left;
	width: 600px;
	height: 20px;
	line-height: 20px;
	background: #3d3d3d;
	border-radius: 3px;
	border: 1px solid #f3f3f3;
	margin-left:10px;
	


	}
#track{
	width:18px;
	height: 18px;
	background: #ededed;
	display:block;
	margin-top:1px;
}

	
#play:checked ~ #play-but{ 
	border-left: 18px solid #ff0000 !important;

}

 #play:checked ~ #prog-bar #track{
	-webkit-animation: play 10s ;
}

	@-webkit-keyframes play{
		0%{margin-left:0}
		100%{margin-left:550px}

	}

dabblet.html

<input type="checkbox" id="play" />
<label id="play-but" for="play"></label>


<!--<label id="pause-but" for="pause"></label>
<input type="checkbox" id="pause" />-->


<div id="prog-bar">
	<span id="track"></span>
</div>

settings.json

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