Creating a stopwatch in CSS

Posted on Tuesday, November 5, 2013

I am currently working on a video of the installation process of windows 8.1 from 8.    I want to add a timer stopwatch to my video.
Looking around I can't find any tool that I particular like to accomplish this.  I am using Camtasia 8 on a windows system.  

I decided to simply take a video of a live running stopwatch and make it a clip I can add to any video I make in the future.   In other words run a stopwatch for 2 hours on my screen and record it.





I found this great stopwatch at http://www.online-stopwatch.com/large-stopwatch/ [1]

I made a recording of it for 2 hours.  I liked the result…. But then I wondered do I have legal rights to use this in the videos I am producing?

So I decided to be safe rather than sorry and make my own html based timer to video.

I came across this site http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript [2] which suggest you can do this entirely with CSS3 and keyframe animation.  I would suggest going to this site to learn a good way to accomplish this goal.  I used a lot of the suggestions made on this site and tweaked them a little to my liking.

Let's see how well this works.  I have never worked with keyframe animation in CSS3.

First a simple html page that will display a list of numbers vertically.

HTML



<html>

<head>
<link rel="stylesheet" href="clock.css" type"text/css" />
</head>
<body>

<div class="numbers">0 1 2 3 4 5 6 7 8 9</div>

</body>

</html>

The spaces after each number help it to align vertically (after a css width is applied)

CSS




* {margin: 0; padding: 0;}

.numbers {width: 10px;}





The resulting page looks like this.

Adding a custom font


The next step is to add a custom font.   According to the W3 school page at http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp [3] you can use @font-face in your css to have the browser load up custom fonts.  Firefox, Chrome, Safari, and Opera suppots .ttf and .otf font types.  IE9 supports .eot and not .ttf  (another reason not to use IE)


Now you need some custom fonts.  You can download some from http://www.dafont.com/ .   The one that is used in the codeplayer demo can be found at  http://www.dafont.com/ds-digital.font






Click download


For this demo I also downloaded an Angry bird font from http://www.dafont.com/angrybirds.font 



Update the code

CSS




* {margin: 0; padding: 0;}

.numbers {
   width: 10px;
   font-family:digital,arial,verdana;
   font-size:50px;
}

@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}



Reloading the web page gives me





To test the angry bird font change the CSS to



* {margin: 0; padding: 0;}

.numbers {
   width: 10px;
   font-family:angry-bird,arial,verdana;
   font-size:50px;
}

@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}






Show single character



Update the code to only show one single character at a time.

HTML




<html>

<head>
<link rel="stylesheet" href="clock.css" type"text/css" />
</head>
<body>

<div class="char">
 <div class="numbers">0 1 2 3 4 5 6 7 8 9</div>
</div>

</body>

</html>








CSS




* {margin: 0; padding: 0;}

.char{
  width:30px;
  height:40px;
  border:1px solid red;
  font-size:50px;
  overflow:hidden;
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;
}

@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}






Now only a single character is shown.  I created a red border around this character just so you can see it better.

Add animation with @keyframes


You can read up on @keyframes at http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp [4]  Here it explains that it is supported in IE 10 and all the other browsers but it has two versions.

I am doing this for my own purposes so I only need to use the version that works on chrome (which is @-webkit-keyframes mymove)

Here is the code changes


CSS



* {margin: 0; padding: 0;}

.char{
  width:30px;
  height:40px;
  border:1px solid red;
  font-size:50px;
  overflow:hidden;

  position:relative;
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;

   -webkit-animation:move 5s steps(10) infinite;
}

@-webkit-keyframes move /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-400px;}
}


@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}
}

Here is a video of the results of this code.




Here is another example where I wanted to animate a transition between number changes.

Here are the code changes.

HTML


<html>

<head>
<link rel="stylesheet" href="clock.css" type"text/css" />
</head>
<body>

<div class="char">
 <div class="numbers">0 1 2 3 4 5 6 7 8 9 0</div>
</div>

</body>

</html>

Had to add an extra 0 at the end for the animation




CSS




* {margin: 0; padding: 0;}

.char{
  width:30px;
  height:40px;
  border:1px solid red;
  font-size:50px;
  overflow:hidden;

  position:relative;
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;

   -webkit-animation:move 10s infinite;
}

@-webkit-keyframes move /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-40px;}
  20% {top:-80px;}
  30% {top:-120px;}
  40% {top:-160px;}
  50% {top:-200px;}
  60% {top:-240px;}
  70% {top:-280px;}
  80% {top:-320px;}
  90% {top:-360px;}
 100% {top:-400px;}
}


@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}

Here is the second animation

Turn it into a simple stopwatch


First I need to set up the seconds so the stop watch can count from 0 to 59 seconds


Here is the code.

HTML



<html>

<head>
<link rel="stylesheet" href="clock2.css" type"text/css" />
</head>
</body>

<div class="clock">
  <div class="char">
   <div class="numbers tenseconds movesix">0 1 2 3 4 5 0</div>
  </div>
  <div class="char">
   <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9 0</div>
  </div>
</div>

</body>

</html>


CSS




* {margin: 0; padding: 0;}

.char{
  width:30px;
  height:40px;
  border:1px solid red;
  font-size:50px;
  overflow:hidden;
  position:relative;

  float:left
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;
}


.moveten {
  -webkit-animation:moveten 1s infinite;
}

.movesix {
  -webkit-animation:movesix 1s infinite;
}

.second{-webkit-animation-duration:10s;}

.tenseconds{
  -webkit-animation-duration:60s;
}


@-webkit-keyframes moveten /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-40px;}
  20% {top:-80px;}
  30% {top:-120px;}
  40% {top:-160px;}
  50% {top:-200px;}
  60% {top:-240px;}
  70% {top:-280px;}
  80% {top:-320px;}
  90% {top:-360px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesix /* Safari and Chrome */
{
   0% {top:0px;}
  16% {top:-40px;}
  33% {top:-80px;}
  50% {top:-120px;}
  66% {top:-160px;}
  83% {top:-200px;}
 100% {top:-240px;}
}


@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}}


Here is a video of the result.

I like the movement of the seconds but I do not like the movement of the ten-second.  I did find a way to fix that using a cubic-bezier setting in the animation.  What this setting will do is adjust the rate at which the animation takes place.  I set it in such a way that the animation goes very very slow at first then at the end (last second) it goes fast.

To get this change update the CSS to the following


CSS




* {margin: 0; padding: 0;}

.char{
  width:30px;
  height:40px;
  border:1px solid red;
  font-size:50px;
  overflow:hidden;
  position:relative;

  float:left
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;
}


.moveten {
  -webkit-animation:moveten 1s infinite;
}

.movesix {
  -webkit-animation:movesix 1s infinite;
}

.second{-webkit-animation-duration:10s;}

.tenseconds{
  -webkit-animation-duration:60s;
  -webkit-animation-timing-function:cubic-bezier(1,0,1,0);
}


@-webkit-keyframes moveten /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-40px;}
  20% {top:-80px;}
  30% {top:-120px;}
  40% {top:-160px;}
  50% {top:-200px;}
  60% {top:-240px;}
  70% {top:-280px;}
  80% {top:-320px;}
  90% {top:-360px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesix /* Safari and Chrome */
{
   0% {top:0px;}
  16% {top:-40px;}
  33% {top:-80px;}
  50% {top:-120px;}
  66% {top:-160px;}
  83% {top:-200px;}
 100% {top:-240px;}
}


@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}





I like this animation much better.
But this is as good as the Bezier gets, as a result it does not work well with minutes/hours etc…. (I tried)

Adding Minutes and Hours (but as quick animations)



Now I am going to add minutes and hours, but I am going to make the minutes and hours animate faster.

HTML




<html>

<head>
<link rel="stylesheet" href="clock.css" type"text/css" />
</head>
</body>

<div class="clock">
  <div class="char">
   <div class="numbers tenhours movetenquick">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="char">
   <div class="numbers onehour movetenquick">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="char">
   <div class="numbers">:</div>
  </div>
  <div class="char">
   <div class="numbers tenminutes movesixquick">0 1 2 3 4 5</div>
  </div>
  <div class="char">
   <div class="numbers oneminute movetenquick">0 1 2 3 4 5 6 7 8 9</div>
  </div>
  <div class="char">
   <div class="numbers">:</div>
  </div>
  <div class="char">
   <div class="numbers tenseconds movesix">0 1 2 3 4 5 0</div>
  </div>
  <div class="char">
   <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9 0</div>
  </div>
</div>

</body>

</html>





CSS




* {margin: 0; padding: 0;}

.char{
  width:30px;
  height:40px;
  border:1px solid red;
  font-size:50px;
  overflow:hidden;
  position:relative;

  float:left
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;
}


.moveten {
  -webkit-animation:moveten 1s infinite;
}

.movesix {
  -webkit-animation:movesix 1s infinite;
}

.movetenquick {
  -webkit-animation:movetenquick 1s steps(10) infinite;
}

.movesixquick {
  -webkit-animation:movesixquick 1s steps(6) infinite;
}

.second{-webkit-animation-duration:10s;}

.tenseconds{
  -webkit-animation-duration:60s;
  -webkit-animation-timing-function:cubic-bezier(1,0,1,0);
}

.oneminute{
  -webkit-animation-duration:600s;
}

.tenminutes{
  -webkit-animation-duration:3600s;
}

.onehour{
  -webkit-animation-duration:36000s;
}

.tenhours{
  -webkit-animation-duration:360000s;
}


@-webkit-keyframes moveten /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-40px;}
  20% {top:-80px;}
  30% {top:-120px;}
  40% {top:-160px;}
  50% {top:-200px;}
  60% {top:-240px;}
  70% {top:-280px;}
  80% {top:-320px;}
  90% {top:-360px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesix /* Safari and Chrome */
{
   0% {top:0px;}
  16% {top:-40px;}
  33% {top:-80px;}
  50% {top:-120px;}
  66% {top:-160px;}
  83% {top:-200px;}
 100% {top:-240px;}
}

@-webkit-keyframes movetenquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesixquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-240px;}
}



@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}


Here is a video of it working (I sped up the parts in-between the transitions)



Adding a start, stop, and reset button




This is the look I am going for on my timer.  When I actually turn my timer into a video I am not going to record the buttons, so the results will look more like this.  (recording a cropped screen from camtasia 8)




Here is the code.
HTML



<html>

<head>
<link rel="stylesheet" href="clock.css" type"text/css" />
</head>
</body>

<div class="container">
 <input id="start" name="controls" type="radio"/>
 <input id="stop"  name="controls" type="radio"/>
 <input id="reset" name="controls" type="radio"/>
 <div class="clock">
   <div class="char">
    <div class="numbers tenhours movetenquick">0 1 2 3 4 5 6 7 8 9</div>
   </div>
   <div class="char">
    <div class="numbers onehour movetenquick">0 1 2 3 4 5 6 7 8 9</div>
   </div>
   <div class="char">
    <div class="numbers">:</div>
   </div>
   <div class="char">
    <div class="numbers tenminutes movesixquick">0 1 2 3 4 5</div>
   </div>
   <div class="char">
    <div class="numbers oneminute movetenquick">0 1 2 3 4 5 6 7 8 9</div>
   </div>
   <div class="char">
    <div class="numbers">:</div>
   </div>
   <div class="char">
    <div class="numbers tenseconds movesix">0 1 2 3 4 5 0</div>
   </div>
   <div class="char">
    <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9 0</div>
   </div>
 </div>
 <div id="timer_controls">
   <label for="start">Start</label>
   <label for="stop">Stop</label>
   <label for="reset">Reset</label>
 </div>
</div>

</body>

</html>





CSS


* {margin: 0; padding: 0;}

.container {
   margin-top:200px;
   text-align:center;
}

.clock{
  padding:10px;
  background:linerar-gradient(top,#222,#444);
  overflow:hidden;
  display:inline-block;
  border: 8px solid #808080;
  border-radius: 6px;
}

.char{
  width:30px;
  height:40px;
  border:1px solid gray;
  font-size:50px;
  overflow:hidden;
  position:relative;

  float:left
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;
}


.moveten {
  -webkit-animation:moveten 1s infinite;
  -webkit-animation-play-state: paused;
}

.movesix {
  -webkit-animation:movesix 1s infinite;
  -webkit-animation-play-state: paused;
}

.movetenquick {
  -webkit-animation:movetenquick 1s steps(10) infinite;
  -webkit-animation-play-state: paused;
}

.movesixquick {
  -webkit-animation:movesixquick 1s steps(6) infinite;
  -webkit-animation-play-state: paused;
}

.second{-webkit-animation-duration:10s;}

.tenseconds{
  -webkit-animation-duration:60s;
  -webkit-animation-timing-function:cubic-bezier(1,0,1,0);
}

.oneminute{
  -webkit-animation-duration:600s;
}

.tenminutes{
  -webkit-animation-duration:3600s;
}

.onehour{
  -webkit-animation-duration:36000s;
}

.tenhours{
  -webkit-animation-duration:360000s;
}


@-webkit-keyframes moveten /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-40px;}
  20% {top:-80px;}
  30% {top:-120px;}
  40% {top:-160px;}
  50% {top:-200px;}
  60% {top:-240px;}
  70% {top:-280px;}
  80% {top:-320px;}
  90% {top:-360px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesix /* Safari and Chrome */
{
   0% {top:0px;}
  16% {top:-40px;}
  33% {top:-80px;}
  50% {top:-120px;}
  66% {top:-160px;}
  83% {top:-200px;}
 100% {top:-240px;}
}

@-webkit-keyframes movetenquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesixquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-240px;}
}



@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}

#timer_controls {
     margin-top: 20px;
}

#timer_controls label {
     cursor: pointer;
     padding: 5px 10px;
     background: #efefef;
     font-family: digital,arial,verdana;
     font-size: 16px;
     border-radius: 0 0 3px 3px;
}

input[name="controls"] {display: none;}


#start:checked~.clock .numbers {-webkit-animation-play-state: running;}
#stop:checked~.clock .numbers {-webkit-animation-play-state: paused;}
#reset:checked~.clock .numbers {-webkit-animation: none;}





With this code you can create the timer.  Here is a video of me running it.  Starting, stopping and resetting it.



Here is a 10 minute clip




Here is a 30 minute clip

Green screen version


I use Camtasia 8.1 for making screencast videos.  It has a "green screen" feature where it can remove a color from a video and make it see through, so other layers can be clearly seen below it.
See this page for more information http://www.techsmith.com/camtasia-features.html [5] )

For the users of Camtasia 8.1 all you need to do is select a clip then click on Visual Properties then checkbox remove a color and choose the correct color (in my case green is the correct one) 




Here is my edited CSS

CSS


* {margin: 0; padding: 0;}

body {
  background-color:#00ff00;
}

.container {
   margin-top:200px;
   text-align:center;
}

.clock{
  padding:10px;
  background:linerar-gradient(top,#222,#444);
  overflow:hidden;
  display:inline-block;
  border: 8px solid #808080;
  border-radius: 6px;
  background-color:white;
}

.char{
  width:30px;
  height:40px;
  border:1px solid gray;
  font-size:50px;
  overflow:hidden;
  position:relative;

  float:left
}

.numbers {
   width:30px;
   line-height:40px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;
   //-webkit-animation:moveten 10s infinite;
}


.moveten {
  -webkit-animation:moveten 1s infinite;
  -webkit-animation-play-state: paused;
}

.movesix {
  -webkit-animation:movesix 1s infinite;
  -webkit-animation-play-state: paused;
}

.movetenquick {
  -webkit-animation:movetenquick 1s steps(10) infinite;
  -webkit-animation-play-state: paused;
}

.movesixquick {
  -webkit-animation:movesixquick 1s steps(6) infinite;
  -webkit-animation-play-state: paused;
}

.second{-webkit-animation-duration:10s;}

.tenseconds{
  -webkit-animation-duration:60s;
  -webkit-animation-timing-function:cubic-bezier(1,0,1,0);
}

.oneminute{
  -webkit-animation-duration:600s;
}

.tenminutes{
  -webkit-animation-duration:3600s;
}

.onehour{
  -webkit-animation-duration:36000s;
}

.tenhours{
  -webkit-animation-duration:360000s;
}


@-webkit-keyframes moveten /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-40px;}
  20% {top:-80px;}
  30% {top:-120px;}
  40% {top:-160px;}
  50% {top:-200px;}
  60% {top:-240px;}
  70% {top:-280px;}
  80% {top:-320px;}
  90% {top:-360px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesix /* Safari and Chrome */
{
   0% {top:0px;}
  16% {top:-40px;}
  33% {top:-80px;}
  50% {top:-120px;}
  66% {top:-160px;}
  83% {top:-200px;}
 100% {top:-240px;}
}

@-webkit-keyframes movetenquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-400px;}
}

@-webkit-keyframes movesixquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-240px;}
}



@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}

#timer_controls {
     margin-top: 20px;
}

#timer_controls label {
     cursor: pointer;
     padding: 5px 10px;
     background: #efefef;
     font-family: digital,arial,verdana;
     font-size: 16px;
     border-radius: 0 0 3px 3px;
}

input[name="controls"] {display: none;}


#start:checked~.clock .numbers {-webkit-animation-play-state: running;}
#stop:checked~.clock .numbers {-webkit-animation-play-state: paused;}
#reset:checked~.clock .numbers {-webkit-animation: none;}






Last tweak


I did not like the way the video turned out.  I did not like the size.  Although I could increase its size in Camtasia, it was too pixelated for my taste, so I made a version that was twice the size.  Here is the final HTML and CSS I used.

HTML



<html>

<head>
<link rel="stylesheet" href="clock.css" type"text/css" />
</head>
</body>

<div class="container">
 <input id="start" name="controls" type="radio"/>
 <input id="stop"  name="controls" type="radio"/>
 <input id="reset" name="controls" type="radio"/>
 <div class="clock">
   <div class="char">
    <div class="numbers tenhours movetenquick">0 1 2 3 4 5 6 7 8 9</div>
   </div>
   <div class="char">
    <div class="numbers onehour movetenquick">0 1 2 3 4 5 6 7 8 9</div>
   </div>
   <div class="char">
    <div class="numbers">:</div>
   </div>
   <div class="char">
    <div class="numbers tenminutes movesixquick">0 1 2 3 4 5</div>
   </div>
   <div class="char">
    <div class="numbers oneminute movetenquick">0 1 2 3 4 5 6 7 8 9</div>
   </div>
   <div class="char">
    <div class="numbers">:</div>
   </div>
   <div class="char">
    <div class="numbers tenseconds movesix">0 1 2 3 4 5 0</div>
   </div>
   <div class="char">
    <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9 0</div>
   </div>
 </div>
 <div id="timer_controls">
   <label for="start">Start</label>
   <label for="stop">Stop</label>
   <label for="reset">Reset</label>
 </div>
</div>

</body>

</html>




CSS



* {margin: 0; padding: 0;}

body {
  background-color:#00ff00;
}

.container {
   margin-top:200px;
   text-align:center;
}

.clock{
  padding:10px;
  //background:linear-gradient(top,#222,#444);
  overflow:hidden;
  display:inline-block;
  border: 8px solid #808080;
  border-radius: 6px;
  background-color:white;
}

.char{
  width:60px;
  height:80px;
  border:1px solid gray;
  font-size:100px;
  overflow:hidden;
  position:relative;

  float:left
}

.numbers {
   width:60px;
   line-height:80px;
   font-family:digital,arial,verdana;
   text-align:center;

   position:absolute;
   top: 0;
   left: 0;
}


.moveten {
  -webkit-animation:moveten 1s infinite;
  -webkit-animation-play-state: paused;
}

.movesix {
  -webkit-animation:movesix 1s infinite;
  -webkit-animation-play-state: paused;
}

.movetenquick {
  -webkit-animation:movetenquick 1s steps(10) infinite;
  -webkit-animation-play-state: paused;
}

.movesixquick {
  -webkit-animation:movesixquick 1s steps(6) infinite;
  -webkit-animation-play-state: paused;
}

.second{-webkit-animation-duration:10s;}

.tenseconds{
  -webkit-animation-duration:60s;
  -webkit-animation-timing-function:cubic-bezier(1,0,1,0);
}

.oneminute{
  -webkit-animation-duration:600s;
}

.tenminutes{
  -webkit-animation-duration:3600s;
}

.onehour{
  -webkit-animation-duration:36000s;
}

.tenhours{
  -webkit-animation-duration:360000s;
}


@-webkit-keyframes moveten /* Safari and Chrome */
{
   0% {top:0px;}
  10% {top:-80px;}
  20% {top:-160px;}
  30% {top:-240px;}
  40% {top:-320px;}
  50% {top:-400px;}
  60% {top:-480px;}
  70% {top:-560px;}
  80% {top:-640px;}
  90% {top:-720px;}
 100% {top:-800px;}
}

@-webkit-keyframes movesix /* Safari and Chrome */
{
   0% {top:0px;}
  16% {top:-80px;}
  33% {top:-160px;}
  50% {top:-240px;}
  66% {top:-320px;}
  83% {top:-400px;}
 100% {top:-480px;}
}

@-webkit-keyframes movetenquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-800px;}
}

@-webkit-keyframes movesixquick /* Safari and Chrome */
{
   0% {top:0px;}
 100% {top:-480px;}
}



@font-face {
  font-family: 'digital';
  src: url('DS-DIGI.TTF');
}

@font-face {
  font-family: 'angry-bird';
  src: url('angrybirds-regular.ttf');
}

#timer_controls {
            margin-top: 20px;
}

#timer_controls label {
            cursor: pointer;
            padding: 5px 10px;
            background: #efefef;
            font-family: digital,arial,verdana;
            font-size: 16px;
            border-radius: 0 0 3px 3px;
}

input[name="controls"] {display: none;}


#start:checked~.clock .numbers {-webkit-animation-play-state: running;}
#stop:checked~.clock .numbers {-webkit-animation-play-state: paused;}
#reset:checked~.clock .numbers {-webkit-animation: none;}




Here is a 10 minute video of this larger font





References
[1]  Online stopwatch
       http://www.online-stopwatch.com/large-stopwatch/
       Visited 10/2013
[2]  Make a stopwatch using CSS3 without images or javascript
       http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript
       Visited 10/2013
[3]  CSS3 @font-face Rule
       http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
       Visited 10/2013
[4]  CSS3 @keyframes Rule
       http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
       Visited 10/2013
[5]  Camtasia Studio Features
       http://www.techsmith.com/camtasia-features.html
       Visited 10/2013


3 comments:

  1. whiteboardcoderApril 28, 2014 at 9:14 AM

    Thanks, I am trying to give back in my own little way. I am constantly Impressed with so many good informational web sites out there that help me get my work done better and faster.

    ReplyDelete
  2. UnknownMarch 16, 2015 at 5:30 AM

    I think you could clean this up by using decimals: for example, 16.6% instead of 16%, and 33.3% instead of 33%.

    ReplyDelete
  3. Online TimerSeptember 23, 2020 at 4:46 AM

    Online Stopwatch Countdown Timer
    September 23, 2020
    It's a really nice tool so what you can do here by the timeline - stopwatch slash countdown timer is that you can put this into full-screen mode so you got down here in the bottom and use the timer in full-screen mode so I'm gonna go ahead

    ReplyDelete