Design, CG Graphics & Inspiration
Stop-watch on CSS3 Without Any Pictures or Scripts

Stop-watch on CSS3 Without Any Pictures or Scripts

Introduction

Firstly, I would like to say a few words about browsers. This code works on such modern browsers as: FireFox, Safari and Chrome. On approach such browsers as IE10 and super secret new Opera.

Secondly, I want to notice at once that I will describe exactly the process of animation, but not drawing on CSS3. For the future I have a different plan, it is to do very beautiful picture, on CSS. Oh yes, it became not so boring, since the developers from safari gave up the old standard of linear – gradient (good bye, color – stop, from, to, 0 0) and Opera at last began to support radial – gradient (the last thing happened relatively a long ago).

At first I thought of creating a simple stop-watch, with pointers only, but it is very boring.

You don’t get any drive and a feeling of mechanism, when you see two pointers hurrying on a monitor. From the other side I remembered how once I did a sort of odometer, for the path passed by a mouse. And suddenly, a brilliant idea came into my head.

Let’s go!

First of all we line up HTML (but the thing is that below is given an example for “odometer»).

<div class="timer">
    <div class="numb tenHour">
    </div>
    <div class="numb hour">
    </div>
    <div class="numb tenMin">
    </div>
    <div class="numb min">
    </div>
    <div class="numb tenSec">
    </div>
    <div class="numb sec">
    </div>
    <div>
     :</div>
    <div class="numb tenMilisec">
    </div>
    <div class="numb milisec">
    </div>
</div>

The plan is the following: we appropriate to every numb div a pseudoelement with a record “0 1 2 3 4 5 6 7 8 9 0”.

Why two zeros? Animation passes from one edge to another, and then without any time delays it comes back to the primary position. In fact we see two different zeros, but it isn’t noticeable on the living example.

Why exactly pseudoelement? Why not to write the numbers straight into the div? Here are two pluses, the first is that we don’t mess up the look of HTML, and the second is that we write it only one time.

We get at least some sort of CSS

.timer div
{
    float: left;
    width: 30px;
    height: 30px;
    position: relative;
}
.numb::before
{
    content:"0 1 2 3 4 5 6 7 8 9 0";
    position: absolute;
    width: 30px;             /* As we have set a width of 30px, all numbers will be from a new line, and that is exactly what we need. */
    height: 360px;
    color: #334;
    text-align: center;
}
.timer div::after
{
    content: "";
    height: 360px;
    width: 1px;
    left: 0;
    background: #889;
}
.timer div:first-child::after
{
    display: none;
}

We set the overflow: hidden for the parent and voilà! That’s all, the odometer is ready.

Animation

So let us move to the animation, all is quite simple here:

.numb
{
   animation-delay: 0;   
   animation-iteration-count: infinite;  
   animation-timing-function: linear;  /* reflection of animation in relation to time - fluently without jerks */
}
.tenHour {animation-duration: 1000000s;}  

.hour { animation-duration: 100000s;}  

.tenMin { animation-duration: 10000s;}

.min { animation-duration: 1000s;}

.tenSec { animation-duration: 100s;}

.sec { animation-duration: 10s;}

.tenMilisec { animation-duration: 1s;}

.milisec { animation-duration: .1s;}   /* in general, it is possible to use ms, but I decided to use the tenth part of a second */

Now it is time for the boring part: frames, more precisely key frames.

@-keyframes timer
{
    0% {top:0}
    100% {top:-300px;}
}

Such code does not suit us, everything moves fluently, but it is not nice and correct, as at a pause we can get on an incomprehensible value. We write the following:

@-keyframes timer
{
    0% {top:0}
    9% {top:0}
    10% {top:-30px}
    19% {top:-30px}
    20% {top:-60px}
    29% {top:-60px}
    30% {top:-90px}
    39% {top:-90px}
    40% {top:-120px}
    49% {top:-120px}
    50% {top:-150px}
    59% {top:-150px}
    60% {top:-180px}
    69% {top:-180px}
    70% {top:-210px}
    79% {top:-210px}
    80% {top:-240px}
    89% {top:-240px}
    90% {top:-270px}
    99% {top:-270px}
    100% {top:-300px;}
}

I will not fall into details, because it actually makes no sense to do that. The essence is that we take 1% from 10 seconds, as time taken for turning over of the counter.
Therefore for tenth – 0% 9.9% 10% 19.9% et cetera. And further, hundredth – 0% 9.99% thousandth – 0% 9.999%.

It works!

Now it’s the most interesting part. How to make this thing work without JS? How do we imitate onclick? There are a few tricks that answer our requirements.

First, it is the oldest and simplest – pseudoclasses for reference. I mean :active, :focus. But it is boring and, besides, it works with some bugs in Chrome (What?! May be in IE?! No, exactly in Chrome).

The second is a more fun method, to use <input/> radio and checkbox and its pseudoelement :cheked. I excluded this method, because the superfluous label element will be needed for each <input/>

Third method that came to my head is the same reference, but with the use of :target.

These are not the only methods that can be used, but when I stopped on :target, I didn’t want to think about finding some other decisions no more.

So, here is the HTML code:

 <a class="start" id="start" href="#start"></a>
            <a class="pause" id="pause" href="#pause"></a>
            <a class="stop" id="stop" href="#stop"></a>

Here is nothing to explain.

And now the CSS:

.start:target ~ .timerInner .numb, .pause:target ~ .timerInner .numb
{
   animation-name: timer;
}
.start:target ~ .timerInner .numb.tenSec, .pause:target ~ .timerInner .numb.tenSec
{
   animation-name: timertenSec;
}
.pause:target ~ .timerInner .sec,
.pause:target ~ .timerInner .tenMilisec
{
    animation-play-state: paused;
}
.stop:target ~ .timer .tenSec,
.stop:target ~ .timer .sec,
{
   animation-name: reset;
}

For the name of animation we set the names of keyframes that we gave above.

And everything starts working. For the button Pause we set this too, it is for the reason that animation couldn’t be zeroed out when pressing on it, but animation needs to be stopped, animation- play – state is provided for such cases.

When pressing Stop, in idea it is possible to appropriate any name, the main thing is that it must not coincide with the name of our animations, then the zeroing takes place. I presented far not all the code of animation, because it is quite monotonous, and appropriated to every div separately, the one who are interested will look up the code.
Ok, now we will do the clock. Exactly the hand, a clock-face is not interesting to us.

HTML

<div class="clock">
                        <div class="line one"></div>
                        <div class="line three"></div>
                        <div class="line five"></div>
                        <div class="arrow"></div>
                    </div>

Divs line simply designate a vertical line on that we put dividing by minutes.
Arrow is actually our hand.

CSS

.arrow
{
   animation-delay: 0;   /* Задержка ноль */
   animation-iteration-count: infinite;    /* бесконечно */
   animation-timing-function: linear;    /* без рывков */
   animation-duration: 600s;    /* 10м x 60с = 600с, время анимации */
   background:#666;
}

We start the hand like in case with odometer.

I think that here is no need to give the code.

In general, here is the final result.

Thank you for attention, in fact I didn’t tell anything new, simply it might be useful to someone, or simply interesting.

You might also be interested in..

Round Avatars in CSS3
Tooltips in CSS3 and HTML5
Making an Image Gallery with CSS3
How to Create Progress Bar with CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
CSS3 Now! Transitions
CSS3 Now! Animation, Transparency, and more (Part 2)
Sprite animation in CSS3
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Leonid Lilo,
  • March 6, 2012

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.