Animated Clock

by Rajdeep Chandra

HTML

<div class="clock bom" data-utc="2.5" id="clock-bom">
  <div class="clock-face">
    <div class="clock-h"></div>
    <div class="clock-m"></div>
    <div class="clock-s"></div>
    <div class="clock-dial"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  </div>
</div>

CSS

@keyframes rotate-h-bom { from { transform:rotate(159.5deg); } to { transform:rotate(519.5deg); } }@keyframes rotate-m-bom { from { transform:rotate(117.4deg); } to { transform:rotate(477.4deg); } }@keyframes rotate-s-bom { from { transform:rotate(204deg); } to { transform:rotate(564deg); } }#clock-bom .clock-h { animation: rotate-h-bom 43200s linear infinite; }#clock-bom .clock-m { animation: rotate-m-bom 3600s linear infinite; }#clock-bom .clock-s { animation: rotate-s-bom 60s linear infinite; }
.clock {}

.clock-face {
	/*background: #f0f0f0;*/
	border-radius: 50%;
	height: 120px;
	margin: 0 auto;
	position: relative;
	width: 0px;
}
.clock-h, .clock-m, .clock-s {
	box-shadow: rgba(0,0,0,.17) 0 0 2px;
	left: 50%;
	position: absolute;
	top: 50%;
	transition: .48s;
}
.clock-h, .clock-m {
	background: #3e3e3e;
	border-radius: 2px;
	margin-left: -2px;
	width: 4px;
}
.clock-h {
	height: 37px;
	margin-top: -29px;
	transform-origin: 2px 29px;
	z-index: 2;
}
.clock-m {
	height: 52px;
	margin-top: -43px;
	transform-origin: 2px 43px;
	z-index: 3;
}
.clock-s {
	background: #30b55a;
	border-radius: 2px;
	height: 57px;
	margin: -48px 0 0 -1px;
	transform-origin: 1px 48px;
	width: 2px;
	z-index: 4;
}
.clock-face:after, .clock-s:after {
	border-radius: 50%;
	content: '';
	height: 8px;
	left: 50%;
	margin: -4px 0 0 -4px;
	position: absolute;
	width: 8px;
	z-index: 5;
}
.clock-face:after {
	background: #e6e6e6;
	box-shadow: inset #30b55a 0 0 0 3px;
	top: 50%;
}
.clock-s:after {
	background: #f6f6f6;
	box-shadow: inset #30b55a 0 0 0 1px;
	top: 21%;
}

/* Optional Dial */
.clock-dial span {
	height: 100%;
	margin-left: -4px;
	position: absolute;
	width: 8px;
}
.clock-dial span:after, .clock-dial span:nth-child(12):before {
	background: #fff;
	box-shadow: inset #ccc 0 0 0 1px;
	content: '';
	left: 50%;
	position: absolute;
	top: 8px;
}

/* Standard Style */
.clock-dial span:after {
	border-radius: 50%;
	height: 7px;
	margin-left: -3.5px;
	width: 7px;
}

/* 12, 3, 6, 9 Style...