• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
HTML 5

Stopwatch Using CSS3

  • WhatsApp
  • Sourabh Somani
  • 9y
  • 8.9k
  • 0
  • 2
    • 100
  • Article
StopWatch.zip

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. :) 

  • CSS3
  • CSS3 stopwatch
  • HTML5 stopwatch
  • Stopwatch
  • stopwatch HTML5
Up Next
    Ebook Download
    View all
    C# Corner Ebook
    Grid structure in css
    Read by 1 people
    Download Now!
    Learn
    View all
    Learn Image
    Learn HTML 5, HTML 5
    sourabhsomani.com
    sourabhsomani.com
    Leaderboard
    View all
    Sarthak Varshney

    Sarthak Varshney
    +0
    Deepak Tewatia

    Deepak Tewatia
    +0
    View all
    Yesterday's leader
    Sarthak Varshney  
    Sarthak Varshney
    Pune (India)
    70
    102
    1.7k
    100
    Member of the month
    Rinki  
    Rinki
    Chennai (India)
    15
    5.4k
    14.8k
    50
    Speaker of the month
    Shivam Payasi  
    Shivam Payasi
    C#, .NET
    Chitrakoot (India)
    8
    21.1k
    19.7k
    10
    Upcoming events
    View all
    • The Cloud Show with Magnus Mårtensson ft. Oscar Garcia Colon - Ep: 45
    • Bhubaneswar Chapter
    • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
    Suggested for you
    View all
    Mahesh Chand Mahesh Chand
    Follow
    Nilesh Jadav Nilesh Jadav
    Follow
    Allen James Allen James
    Follow
    Nitin Pandit Nitin Pandit
    Follow
    James Tomar James Tomar
    Follow

    CSharpBot

    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

    Sign-Up Now

    For Basic members:

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

    $20

    $

    . 00

    monthly

    Sign-Up Now

    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

    Sign-Up Now

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs
    About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

    ©2024 C# Corner.

    All contents are copyright of their authors.