-----------------------------------------DEMO--------------------------------------------------
-----------------------------------------HTML5-------------------------------------------------
<div class="container">
<h2>Digital Clock</h2>
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="digital_clock">
<div class="cell">
<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<div id="digital_clock_controls">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label>
</div>
</div>
-----------------------------------------CSS3--------------------------------------------------
@font-face { font-family: 'digital'; src: url('digital-7/digital-7.TTF'); }
h2 { color:#fff; font-family:Arial, Helvetica, sans-serif; margin-bottom:5px; }
* { margin:0; padding:0; }
.container { text-align:center; background:#333; border:1px solid #FFF; width:300px; height:150px; padding:20px; }
.digital_clock { padding:10px; background:linear-gradient(top, #222, #444); overflow:hidden; display:inline-block; border:10px solid #000; border-radius:5px;
position:relative; font-family:digital-7; }
.cell { width:0.60em; height:40px; font-size:50px; overflow:hidden; position:relative; float:left; }
.numbers { width:0.6em; line-height:40px; font-family:digital, arial, verdana; text-align:center; color:#00f2eb; position:absolute; top:0; left:0;
text-shadow:#ff0; }
#digital_clock_controls { margin-top:10px; }
#digital_clock_controls label { cursor
ointer; padding:10px 30px; background:#000; font-family:arial, verdana, tahoma; font-size:14px; color:#fff; }
input[name="controls"] { display:none; }
#stop:checked~.digital_clock .numbers {animation-play-state
aused;}
#start:checked~.digital_clock .numbers {animation-play-state:running;}
#reset:checked~.digital_clock .numbers {animation:none;}
.moveten { animation:moveten 1s steps(10, end) infinite; animation-play-state
aused; }
.movesix { animation:movesix 1s steps(6, end) infinite; animation-play-state
aused; }
.second {animation-duration:10s;}
.tensecond {animation-duration:60s;}
.minute {animation-duration:600s;}
.tenminute {animation-duration:3600s;}
.hour {animation-duration:36000s;}
.tenhour {animation-duration:360000s;}
@keyframes moveten { 0% {top:0;} 100% {top:-400px;} }
@keyframes movesix { 0% {top:0;} 100% {top:-240px;} }
