HTML 5

Stopwatch Using CSS3

Introduction

In this article we'll create a stop watch using HTML5 and CSS3. We will only focus on CSS3 keyframe animation and there will be the 3 states start, stop and reset. Start will start the stopwatch, stop will stop the stopwatch and reset can reset the stopwatch.

The core logic is very simple, we will use a simple div container to contain some numbers and that will be move upside using key frame animation.

First create a div (with the containing number) using the following HTML Code:
  1. <!doctype html>    
  2.    <html>    
  3.       <head>    
  4.          <title>Stopwatch</title>    
  5.          <link rel="stylesheet" href="Style.css"/>    
  6.       </head>    
  7.       <body>    
  8.          <div class="number">0 1 2 3 4 5 6 7 8 9</div>    
  9.       </body>    
  10.    </html> 
The following is the output of the preceding code:



Now we align the numbers vertically by reducing the width of the container. So create a CSS file (styles.css) and write the following code inside that CSS file.
  1. * {  
  2.      margin: 0; padding: 0;  
  3.  }    
  4.     
  5. .numbers {  
  6.      width: 10px;  
  7. }      
With the preceding code your output numbers will be aligned vertically such as in the following:
 
Now I am using some digital fonts that you can download form the link ds-digi.font. Use the following CSS code to modify the font-family.
  1. .number {  
  2.     width: 10px;  
  3.     font-family: digital, arial, verdana;  
  4.     font-size:50px;  
  5. }  
  6. @font-face {  
  7.     font-family: 'digital';  
  8.     src: url('DS-DIGI.TTF');      
  9. }  
With the preceding code the output will be as in the following:
 
Let's wrap up the numbers in a box to display 1 digit only.  So in the HTML file put your number div in another box div. The code is as in the following:
  1. <div class="box">    
  2.    <div class="number">0 1 2 3 4 5 6 7 8 9</div>    
  3. </div> 
Now apply the following CSS rules to display only one digit:
  1. .box{    
  2.     width:40px;    
  3.     height:40px;    
  4.     border: 1px solid #000;    
  5.     font-size:50px;    
  6.     overflow:hidden;    
  7. }    
  8.     
  9. .number {    
  10.     width: 40px;    
  11.     line-height:40px;    
  12.     font-family: digital, arial, verdana;    
  13.     text-align: center;    
  14. }  
The following the output of the preceding code:
 
Let's animate the digit since that is the main task of this article. The logic for the animation is to alter the value of the top absolute position from 0 to -400px because the height of the box is 40 px and we have 0 to 9, in other words a total of 10 numbers so (40*10=400) we will alter the top from 0 to -400px. Provide the following code for the style.css file.
  1. .box{  
  2.     width:40px;  
  3.     height:40px;  
  4.     border: 1px solid #000;  
  5.     font-size:50px;  
  6.     overflow:hidden;  
  7.       
  8.     position: relative;  
  9. }  
  10.   
  11. .number {  
  12.     width: 40px;  
  13.     line-height:40px;  
  14.     font-family: digital, arial, verdana;  
  15.     text-align: center;  
  16.       
  17.     position: absolute;  
  18.     top: 0;  
  19.     left: 0;  
  20.       
  21.     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */   
  22.     animation: moveup 1s steps(10, end) infinite;  
  23. }  
  24. @-webkit-keyframes moveup {  
  25.     0%   {top: 0px;}  
  26.     100%{top:-400px;}  
  27. }  
  28.   
  29. @keyframes moveup {  
  30.     0%   {top: 0px;}  
  31.     100%{top:-400px;}  
  32. }  
The following is the output of the preceding code:
 

You can see that the digits are swapping instead of moving up pixel by pixel.
 
Now create some more div for 2 for hours, 2 for minutes, 2 for seconds and 3 for mili-seconds in your HTML file.
  1. <!doctype html>    
  2. <html>    
  3.    <head>    
  4.       <title>Stopwatch</title>    
  5.       <link rel="stylesheet" href="Style.css"/>    
  6.    </head>    
  7.    <body>    
  8.       <div class="stopwatch">   
  9.          <div class="box">    
  10.             <!--For Hours-->    
  11.             <div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9</div>    
  12.          </div>    
  13.          <div class="box">    
  14.             <div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9</div>    
  15.          </div>    
  16.     
  17.          <!--Divider Between hours and Minute-->    
  18.          <div class="box divider">    
  19.                <div class="number">:</div>    
  20.          </div>    
  21.     
  22.          <!--For Minute-->    
  23.          <div class="box">    
  24.             <div class="number tensPlaceMinutes">0 1 2 3 4 5 6</div>    
  25.          </div>    
  26.          <div class="box">    
  27.             <div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9</div>    
  28.          </div>    
  29.     
  30.          <!--Divider Between Minute and second-->    
  31.          <div class="box divider">    
  32.                <div class="number">:</div>    
  33.          </div>    
  34.     
  35.          <!--For Second-->    
  36.          <div class="box">    
  37.                <div class="number tensPlaceSeconds">0 1 2 3 4 5 6</div>    
  38.          </div>    
  39.          <div class="box">    
  40.                <div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9</div>    
  41.          </div>    
  42.     
  43.          <!--Divider Between Second and MiliSecond-->    
  44.          <div class="box divider">    
  45.             <div class="number">:</div>    
  46.          </div>    
  47.     
  48.          <!--For Mili-Second-->    
  49.          <div class="box">    
  50.             <div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9</div>    
  51.          </div>    
  52.          <div class="box">    
  53.             <div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9</div>    
  54.          </div>    
  55.          <div class="box">    
  56.             <div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9</div>    
  57.          </div>    
  58.        </div>   
  59.    </body>    
  60. </html>  
The following is the output using the preceding code:
 
 
Now float all the boxes left so in the Style.css for the box class selector provide the float:left property.
  1. .box{    
  2.     width:40px;    
  3.     height:40px;    
  4.     border: 1px solid #000;    
  5.     font-size:50px;    
  6.     overflow:hidden;    
  7.         
  8.     position: relative;    
  9.     float:left;    
  10. } 
After applying the float:left property the output will be as in the following:
 
 
Here the minutes and seconds max values will be 60 so we need to create two animations, one that will have 10 steps and 10 digits and the other one with 6 steps and only 6 digits. Use the following CSS code for this:
  1. * {  
  2.     margin: 0; padding: 0;  
  3. }  
  4. .box{  
  5.     width:40px;  
  6.     height:40px;  
  7.     border: 1px solid #000;  
  8.     font-size:50px;  
  9.     overflow:hidden;  
  10.       
  11.     position: relative;  
  12.     float:left;  
  13. }  
  14.   
  15. .number {  
  16.     width: 40px;  
  17.     line-height:40px;  
  18.     font-family: digital, arial, verdana;  
  19.     text-align: center;  
  20.       
  21.     position: absolute;  
  22.     top: 0;  
  23.     left: 0;  
  24.       
  25.     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */   
  26.     animation: moveup 1s steps(10, end) infinite;  
  27. }  
  28.   
  29. .moveuptens{  
  30.     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */   
  31.     animation: moveuptens 1s steps(10, end) infinite;  
  32. }  
  33. .moveupsix{  
  34.     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */   
  35.     animation: moveupsix 1s steps(6, end) infinite;  
  36. }  
  37.   
  38. @-webkit-keyframes moveup {  
  39.     0%   {top: 0px;}  
  40.     100%{top:-400px;}  
  41. }  
  42.   
  43.   
  44. @keyframes moveup {  
  45.     0%   {top: 0px;}  
  46.     100%{top:-400px;}  
  47. }  
  48.   
  49. @-webkit-keyframes moveuptens {  
  50.     0%   {top: 0px;}  
  51.     100%{top:-400px;}  
  52. }  
  53.   
  54.   
  55. @keyframes moveuptens {  
  56.     0%   {top: 0px;}  
  57.     100%{top:-400px;}  
  58. }  
  59.   
  60. @-webkit-keyframes moveupsix {  
  61.     0%   {top: 0px;}  
  62.     100%{top:-240px;}  
  63. }  
  64.   
  65.   
  66. @keyframes moveupsix {  
  67.     0%   {top: 0px;}  
  68.     100%{top:-240px;}  
  69. }  
  70.   
  71. @font-face {  
  72.     font-family: 'digital';  
  73.     src: url('DS-DIGI.TTF');      
  74. }  
Now after creating the preceding 2 animations apply a CSS class to the HTML as in the following code:
  1. <div class="stopwatch">  
  2. <div class="box">  
  3.    <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  4. </div>  
  5. <div class="box">  
  6.    <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  7. </div>  
  8.   
  9. <div class="box divider">  
  10.    <div class="number">:</div>  
  11. </div>  
  12.   
  13. <div class="box">  
  14.    <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6</div>  
  15. </div>  
  16. <div class="box">  
  17.    <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  18. </div>  
  19.   
  20. <div class="box divider">  
  21.    <div class="number">:</div>  
  22. </div>  
  23.   
  24. <div class="box">  
  25.    <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6</div>  
  26. </div>  
  27. <div class="box">  
  28.    <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  29. </div>  
  30.   
  31. <div class="box divider">  
  32.    <div class="number">:</div>  
  33. </div>  
  34.   
  35.   
  36. <div class="box">  
  37.    <div class="number 
    onesPlace
    MiliSeconds moveuptens"    >0 1 2 3 4 5 6 7 8 9</div>  
  38. </div>  
  39. <div class="box">  
  40.    <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  41. </div>  
  42. <div class="box">  
  43.    <div class="number
    hundredsPlace
    MiliSeconds moveuptens"    >0 1 2 3 4 5 6 7 8 9</div>  
  44. </div>  
  45. </div>  
Now your output is as in the following:
 
 
Now we need to sync the animation speed with the time speed. So apply the following properties:
  1. .onesPlaceSeconds {    
  2.     animation-duration: 10s;    
  3.     -webkit-animation-duration: 10s;    
  4. }    
  5. .tensPlaceSeconds {    
  6.     animation-duration: 60s;    
  7.     -webkit-animation-duration: 60s;    
  8. }    
  9.     
  10. .hundredsPlaceMiliSeconds {    
  11.     animation-duration: 1s;    
  12.     -webkit-animation-duration: 1s;    
  13.     } /*1/10th of .second*/    
  14.         
  15. .tensPlaceMiliSeconds {    
  16.     animation-duration: 0.1s;    
  17.     -webkit-animation-duration: 0.1s;    
  18. }    
  19. .hundredsPlaceMiliSeconds {    
  20.     animation-duration: 0.01s;    
  21.     -webkit-animation-duration: 0.01s;    
  22. }    
  23.     
  24. .onesPlaceMinutes {    
  25.     animation-duration: 600s;    
  26.     -webkit-animation-duration: 600s;    
  27. } /*60 times .second*/    
  28. .tensPlaceMinutes {    
  29.     animation-duration: 3600s;    
  30.     -webkit-animation-duration: 3600s;    
  31. } /*60 times .minute*/    
  32.     
  33. .onesPlaceHours {    
  34.     animation-duration: 36000s;    
  35.     -webkit-animation-duration: 36000s;    
  36. } /*60 times .minute*/    
  37. .tensPlaceHours {    
  38.     animation-duration: 360000s;    
  39.     -webkit-animation-duration: 360000s;    
  40. } /*10 times .hour*/  
The following is the output of the preceding code:
You can see that now the stop watch is looking good. Now to add some styles to the stop watch. I am modifying the HTML and CSS now for the style.
 
HTML File: 
  1. <!doctype html>  
  2. <html>  
  3.    <head>  
  4.       <title>Stopwatch</title>  
  5.       <link rel="stylesheet" href="Style.css"/>  
  6.    </head>  
  7.    <body>  
  8.   
  9.       <div class="MainContainer">  
  10.          <div class="stopwatch">  
  11.             <div class="box">  
  12.                <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  13.             </div>  
  14.             <div class="box">  
  15.                <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  16.             </div>  
  17.   
  18.             <div class="box divider">  
  19.                <div class="number">:</div>  
  20.             </div>  
  21.   
  22.             <div class="box">  
  23.                <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6</div>  
  24.             </div>  
  25.             <div class="box">  
  26.                <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  27.             </div>  
  28.   
  29.             <div class="box divider">  
  30.                <div class="number">:</div>  
  31.             </div>  
  32.   
  33.             <div class="box">  
  34.                <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6</div>  
  35.             </div>  
  36.             <div class="box">  
  37.                <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  38.             </div>  
  39.   
  40.             <div class="box divider">  
  41.                <div class="number">:</div>  
  42.             </div>  
  43.   
  44.   
  45.             <div class="box">  
  46.                <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  47.             </div>  
  48.             <div class="box">  
  49.                <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  50.             </div>  
  51.             <div class="box">  
  52.                <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  53.             </div>  
  54.          </div>  
  55.       </div>  
  56.    </body>  
  57. </html>  
CSS File:
  1. * {    
  2.     margin: 0;     
  3.     padding: 0;    
  4. }    
  5.     
  6. body{    
  7.     background:url(images.jpg);    
  8. }    
  9.     
  10. .MainContainer{    
  11.     padding:200px;    
  12.     text-align:center;    
  13. }    
  14.     
  15. .stopwatch{    
  16.     padding:10px;    
  17.     background: linear-gradient(top, #222, #444);    
  18.     overflow: hidden;    
  19.     display:inline-block;    
  20.     border: 7px solid #eeeeee;    
  21.     border-radius:20px;    
  22.         
  23.     box    
  24. }    
  25.     
  26. .box{    
  27.     width:40px;    
  28.     height:40px;    
  29.     font-size:50px;    
  30.     overflow:hidden;    
  31.         
  32.     position: relative;    
  33.     float:left;    
  34. }    
  35.     
  36. .number {    
  37.     width: 40px;    
  38.     line-height:40px;    
  39.     font-family: digital, arial, verdana;    
  40.     text-align: center;    
  41.     color:#fff;    
  42.         
  43.     position: absolute;    
  44.     top: 0;    
  45.     left: 0;    
  46.         
  47.     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     
  48.     animation: moveup 1s steps(10, end) infinite;    
  49. }    
  50.     
  51. .moveuptens{    
  52.     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */     
  53.     animation: moveuptens 1s steps(10, end) infinite;    
  54. }    
  55. .moveupsix{    
  56.     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */     
  57.     animation: moveupsix 1s steps(6, end) infinite;    
  58. }    
  59.     
  60. .onesPlaceSeconds {    
  61.     animation-duration: 10s;    
  62.     -webkit-animation-duration: 10s;    
  63. }    
  64. .tensPlaceSeconds {    
  65.     animation-duration: 60s;    
  66.     -webkit-animation-duration: 60s;    
  67. }    
  68.     
  69. .onesPlaceMiliSeconds {    
  70.     animation-duration: 1s;    
  71.     -webkit-animation-duration: 1s;    
  72.     } /*1/10th of .second*/    
  73.         
  74. .tensPlaceMiliSeconds {    
  75.     animation-duration: 0.1s;    
  76.     -webkit-animation-duration: 0.1s;    
  77. }    
  78. .hundredsPlaceMiliSeconds {    
  79.     animation-duration: 0.01s;    
  80.     -webkit-animation-duration: 0.01s;    
  81. }    
  82.     
  83. .onesPlaceMinutes {    
  84.     animation-duration: 600s;    
  85.     -webkit-animation-duration: 600s;    
  86. } /*60 times .second*/    
  87. .tensPlaceMinutes {    
  88.     animation-duration: 3600s;    
  89.     -webkit-animation-duration: 3600s;    
  90. } /*60 times .minute*/    
  91.     
  92. .onesPlaceHours {    
  93.     animation-duration: 36000s;    
  94.     -webkit-animation-duration: 36000s;    
  95. } /*60 times .minute*/    
  96. .tensPlaceHours {    
  97.     animation-duration: 360000s;    
  98.     -webkit-animation-duration: 360000s;    
  99. } /*10 times .hour*/    
  100.     
  101. @-webkit-keyframes moveup {    
  102.     0%   {top: 0px;}    
  103.     100%{top:-400px;}    
  104. }    
  105.     
  106.     
  107. @keyframes moveup {    
  108.     0%   {top: 0px;}    
  109.     100%{top:-400px;}    
  110. }    
  111.     
  112. @-webkit-keyframes moveuptens {    
  113.     0%   {top: 0px;}    
  114.     100%{top:-400px;}    
  115. }    
  116.     
  117.     
  118. @keyframes moveuptens {    
  119.     0%   {top: 0px;}    
  120.     100%{top:-400px;}    
  121. }    
  122.     
  123. @-webkit-keyframes moveupsix {    
  124.     0%   {top: 0px;}    
  125.     100%{top:-240px;}    
  126. }    
  127.     
  128.     
  129. @keyframes moveupsix {    
  130.     0%   {top: 0px;}    
  131.     100%{top:-240px;}    
  132. }    
  133.     
  134. @font-face {    
  135.     font-family: 'digital';    
  136.     src: url('DS-DIGI.TTF');        
  137. }  
After applying some style the output of the stop watch is as in the following:
 
 
Now I am adding 3 radio buttons t6o start, stop and reset the stopwatch. In other words these buttons will control the stop watch.
 
HTML Code:
  1. <!doctype html>  
  2.    <html>  
  3.       <head>  
  4.          <title>Stopwatch</title>  
  5.          <link rel="stylesheet" href="Style.css"/>  
  6.       </head>  
  7.       <body>  
  8.   
  9.          <div class="MainContainer">  
  10.             <input id="start" name="controls" type="radio" />  
  11.             <input id="stop" name="controls" type="radio" />  
  12.             <input id="reset" name="controls" type="radio" />  
  13.          <div class="stopwatch">  
  14.             <div class="box">  
  15.                <div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  16.             </div>  
  17.             <div class="box">  
  18.                <div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  19.             </div>  
  20.   
  21.             <div class="box divider">  
  22.                <div class="number">:</div>  
  23.             </div>  
  24.   
  25.             <div class="box">  
  26.                <div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6</div>  
  27.             </div>  
  28.             <div class="box">  
  29.                <div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  30.             </div>  
  31.   
  32.             <div class="box divider">  
  33.                <div class="number">:</div>  
  34.             </div>  
  35.   
  36.             <div class="box">  
  37.                <div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6</div>  
  38.             </div>  
  39.             <div class="box">  
  40.                <div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  41.             </div>  
  42.   
  43.             <div class="box divider">  
  44.                <div class="number">:</div>  
  45.             </div>   
  46.   
  47.             <div class="box">  
  48.                <div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  49.             </div>  
  50.             <div class="box">  
  51.                <div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  52.             </div>  
  53.             <div class="box">  
  54.                <div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9</div>  
  55.             </div>  
  56.       </div>  
  57.       <!--labels for controls-->  
  58.        <div id="stopwatch_controls">  
  59.            <label for="start">Start</label>  
  60.            <label for="stop">Stop</label>  
  61.            <label for="reset">Reset</label>  
  62.        </div>  
  63.       </div>  
  64.    </body>  
  65. </html>  
Now apply some CSS to style the controls and control's label and also control the animation with that:
  1. * {  
  2.     margin: 0;   
  3.     padding: 0;  
  4. }  
  5.   
  6. body{  
  7.     background:url(images.jpg);  
  8. }  
  9.   
  10. .MainContainer{  
  11.     padding:200px;  
  12.     text-align:center;  
  13. }  
  14.   
  15. .stopwatch{  
  16.     padding:10px;  
  17.     background: linear-gradient(top, #222, #444);  
  18.     overflow: hidden;  
  19.     display:inline-block;  
  20.     border: 7px solid #eeeeee;  
  21.     border-radius:20px;  
  22.       
  23.     box  
  24. }  
  25.   
  26. .box{  
  27.     width:40px;  
  28.     height:40px;  
  29.     font-size:50px;  
  30.     overflow:hidden;  
  31.       
  32.     position: relative;  
  33.     float:left;  
  34. }  
  35.   
  36. .number {  
  37.     width: 40px;  
  38.     line-height:40px;  
  39.     font-family: digital, arial, verdana;  
  40.     text-align: center;  
  41.     color:#fff;  
  42.       
  43.     position: absolute;  
  44.     top: 0;  
  45.     left: 0;  
  46.       
  47.     -webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */   
  48.     animation: moveup 1s steps(10, end) infinite;  
  49. }  
  50.   
  51. #stopwatch_controls label {  
  52.     cursor: pointer;  
  53.     padding: 5px 10px;  
  54.     background: #eeeeee;  
  55.     font-family: arial, verdana, tahoma;  
  56.     font-size: 20px;  
  57.     border-radius: 0 0 3px 3px;  
  58. }  
  59.   
  60. input[name="controls"] {  
  61.     display: none  
  62. }  
  63.   
  64. #stop:checked~.stopwatch .number {  
  65.     animation-play-state: paused;  
  66.     -webkit-animation-play-state: paused;     
  67. }  
  68. #start:checked~.stopwatch .number {  
  69.     animation-play-state: running;  
  70.     -webkit-animation-play-state: running;  
  71. }  
  72. #reset:checked~.stopwatch .number {  
  73.     animation: none;  
  74.     -webkit-animation: none;  
  75. }  
  76.   
  77. .moveuptens{  
  78.     -webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */   
  79.     animation: moveuptens 1s steps(10, end) infinite;  
  80.     /*By default animation will be paused*/  
  81.     animation-play-state: paused;  
  82.     -webkit-animation-play-state: paused;     
  83. }  
  84. .moveupsix{  
  85.     -webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */   
  86.     animation: moveupsix 1s steps(6, end) infinite;  
  87.     /*By default animation will be paused*/  
  88.     animation-play-state: paused;  
  89.     -webkit-animation-play-state: paused;     
  90. }  
  91.   
  92. .onesPlaceSeconds {  
  93.     animation-duration: 10s;  
  94.     -webkit-animation-duration: 10s;  
  95. }  
  96. .tensPlaceSeconds {  
  97.     animation-duration: 60s;  
  98.     -webkit-animation-duration: 60s;  
  99. }  
  100.   
  101. .onesPlaceMiliSeconds {  
  102.     animation-duration: 1s;  
  103.     -webkit-animation-duration: 1s;  
  104.     } /*1/10th of .second*/  
  105.       
  106. .tensPlaceMiliSeconds {  
  107.     animation-duration: 0.1s;  
  108.     -webkit-animation-duration: 0.1s;  
  109. }  
  110. .hundredsPlaceMiliSeconds {  
  111.     animation-duration: 0.01s;  
  112.     -webkit-animation-duration: 0.01s;  
  113. }  
  114.   
  115. .onesPlaceMinutes {  
  116.     animation-duration: 600s;  
  117.     -webkit-animation-duration: 600s;  
  118. } /*60 times .second*/  
  119. .tensPlaceMinutes {  
  120.     animation-duration: 3600s;  
  121.     -webkit-animation-duration: 3600s;  
  122. } /*60 times .minute*/  
  123.   
  124. .onesPlaceHours {  
  125.     animation-duration: 36000s;  
  126.     -webkit-animation-duration: 36000s;  
  127. } /*60 times .minute*/  
  128. .tensPlaceHours {  
  129.     animation-duration: 360000s;  
  130.     -webkit-animation-duration: 360000s;  
  131. } /*10 times .hour*/  
  132.   
  133. @-webkit-keyframes moveup {  
  134.     0%   {top: 0px;}  
  135.     100%{top:-400px;}  
  136. }  
  137.   
  138.   
  139. @keyframes moveup {  
  140.     0%   {top: 0px;}  
  141.     100%{top:-400px;}  
  142. }  
  143.   
  144. @-webkit-keyframes moveuptens {  
  145.     0%   {top: 0px;}  
  146.     100%{top:-400px;}  
  147. }  
  148.   
  149.   
  150. @keyframes moveuptens {  
  151.     0%   {top: 0px;}  
  152.     100%{top:-400px;}  
  153. }  
  154.   
  155. @-webkit-keyframes moveupsix {  
  156.     0%   {top: 0px;}  
  157.     100%{top:-240px;}  
  158. }  
  159.   
  160.   
  161. @keyframes moveupsix {  
  162.     0%   {top: 0px;}  
  163.     100%{top:-240px;}  
  164. }  
  165.   
  166. @font-face {  
  167.     font-family: 'digital';  
  168.     src: url('DS-DIGI.TTF');      
  169. }  
Final Output

 
 
Happy Coding. :) 

Up Next
    Ebook Download
    View all
    Learn
    View all
    sourabhsomani.com
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs