Animation

dabblet.css

#clock {
	position: relative;
	width: 200px;
	height: 200px;
	border: 5px solid black;
	border-radius: 200px;
}
#clock:before {
	position: absolute;	display: inline-block;
	width: 10px;
	height: 10px;
	background: #212121;
	border-radius: 10px;
	top: 50%;
	margin-top: -5px;
	left: 50%;
	margin-left: -5px;
	z-index: 5;
	content: "";
}
.second {
	display: block;
	position:absolute;
	top:50%;
	
	width: 100%;
	height:2%;
	margin-top: -1%;
	
	animation: handle 60s steps( 60 ) 0 infinite;
	transform-origin: 50% 50%;
}
.second span {
	width: 50%;
	height: 100%;
	background: green;
	display:block;
}
.minute {
	display: block;
	position:absolute;
	top:50%;
	
	width: 100%;
	height:2%;
	margin-top: -1%;
	
	animation: handle 3600s steps( 60 ) 0 infinite;
	transform-origin: 50% 50%;
}
.minute span {
	margin-left: 10%;
	width: 40%;
	height: 100%;
	background: blue;
	display:block;
}
.hour {
	display: block;
	position:absolute;
	top:50%;
	
	width: 100%;
	height:2%;
	margin-top: -1%;
	
	animation: handle 86400s steps( 60 ) -79200s infinite;
	transform: rotate(-270deg);
	transform-origin: 50% 50%;
}
.hour span {
	margin-left: 20%;
	width: 30%;
	height: 100%;
	background: red;
	display:block;
}

/* Animation */

@-webkit-keyframes handle {
	0% { transform: rotate(90deg); }
	100% { transform: rotate(450deg); }
}

dabblet.html

<div id="clock">
	<span class="second"><span></span></span>
	<span class="minute"><span></span></span>
	<span class="hour"><span></span></span>
</div>

settings.json

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