

Stopwatch in CSS - paullaros
http://paullaros.github.io/stopwatch-in-css/

======
mmahemoff
There's actually a genre of pure-CSS games [1]. CSS3 Panic was interesting as
(I think) the first one to keep score.

1\.
[http://thejavascripthomework.wordpress.com/2012/10/13/15-pur...](http://thejavascripthomework.wordpress.com/2012/10/13/15-pure-
css3-games/)

2\. [http://cssdeck.com/labs/css-panic-game](http://cssdeck.com/labs/css-
panic-game)

------
raganesh
This is cool. But should the fourth section (sub-seconds) be running from
0-99? It is currently running from 0-59, too.

Sorry about the nitpick; this really is a cool implementation :-)

~~~
paullaros
Updated! Thanks for your feedback.

------
kalleboo
Very cool hack!

I've had CSS animations go out of sync before in Safari, so I presume this
wouldn't be a very accurate timer in the long run...

------
jakejake
Really cool! Would anybody care to enlighten me on how the start/stop buttons
work? I see that they add an anchor to the URL but I couldn't figure out how
that triggers the style change. Thanks for sharing!

~~~
addedlovely
:target pseudo selector

~~~
jakejake
ah cool thanks

------
rohitv
It's behaving really weird for me. Initially the milliseconds go from 0 to 99
repeatedly. After click on play, the seconds start increasing and when paused
it is paused but the milliseconds still go from 0-99 repeatedly. Similar
behaviour with stop, it resets the seconds but milliseconds still go from 0-99
repeatedly.I'm on Chrome 31.

Aside from that, great work :)

------
csmuk
Goes absolutely bat shit in IE11 flickering and all sorts going on.

Then again what do I expect?

Works fine in Chrome and Firefox.

~~~
teh_klev
Oddly though this behaves just fine in IE10 and much better than in Chrome
which keeps counting up the milliseconds regardless of whether the stopwatch
is running or not.

------
ChikkaChiChi
Fastest time from play to pause seems to be 00:00:00:16. I think the fade
animation prevents the DOM from responding any faster.

(What, doesn't everyone do the 'see how fast you can stop it' test to every
stopwatch ever put into their hands?

------
vog
Nice work, but I find it a bit disappointing that the first thing I see on a
"CSS-only" site is a big warning from NoScript. I think this site would make
its point more clear if it didn't contain any JavsScript, even though it's
just for Google Analytics.

------
mattmanser
I love how the stop button is just a link to the page. Smart.

~~~
Kiro
And how the pause button is... nothing, just to remove target from the start
button.

------
raldi
Could someone post a summary of how it works, for the benefit of those of us
reading HN on our phones?

Edit: I'm not asking _what_ it does, but _how._

~~~
crisnoble
It is literally a stopwatch. You click play, you click pause, you click stop
and it behaves exactly like the Seiko hanging from your gym teacher's neck.
The interesting part is that it works with nothing but HTML/CSS, and the
animations are flawless while the design is clean.

Also, does it really not work on the phone?

~~~
claybinion
I think he was talking about how it works from a programming perspective. He
possibly can't view source on his phone.

Edit: For the record it works and looks fine on my android phone, better than
Chrome on my desktop in my opinion.

------
maho
For me, the button font doesn't load and the background transisiotions are, as
always, extremely sluggish. (Firefox 17 ESR)

~~~
adam12
The button fonts aren't loading for me either in Firefox 25.

------
drinchev
Looks great and works on Chrome. The idea is pretty nice.

~~~
adam12
The buttons don't work for me in Chrome 31.0.1650.57 m

------
mrcactu5
what does "pure CSS" mean? no javascript ?

------
Dirlewanger
The entire page color change hurts.

------
oneeyedpigeon
is something supposed to happen when I press play (safari, iPad)?

~~~
hayksaakian
The time starts ticking (chrome beta, android)

It'd be cool if I could read the time via JS

~~~
mctx
You can - try something like this:

parseInt(getComputedStyle($('#seconds'), ':after').top)/-76

(see
[https://gist.github.com/alexlouden/7481780](https://gist.github.com/alexlouden/7481780)
for full)

------
aimhb
Great example of a cool trick using completely the wrong tool for the job.

~~~
corresation
Whether it is the wrong tool is arguable (it is a clever declarative
implementation). But regardless, demos such as this primarily demonstrate
features and functions of a technology in a novel way, and it seems likely
many who view will have a 'you can do that with CSS?' reaction, perhaps taking
it to add to more traditional implementations.

~~~
mnsc
And the risk is they'll get inspired and try to solve another problem with css
and a "clever declarative implementation" only that is better solved with the
appropriate technology.

I'm not saying these tech explorations are bad, they just need to have a big
fat disclaimer "don't try this in prod" and preferably a reference
implementation of how it would be done "properly".

~~~
corresation
_and preferably a reference implementation of how it would be done "properly"_

Any implementation could be _torn to shreds_.

Because that's how the evolutionary, competitive nature of technology works.
Nothing is "right" or "wrong", to use the scarequotes so in fashion, but is
from a perspective and position. If things needed disclaimers around here --
as if we're all idiots, or worse jaded cynics -- then I think it would be a
bad day for HN.

~~~
mnsc
The disclaimer wasn't for the HN crowd necessarily. And the reference
implementation would be useful for both showing "the proper way" and acting
like a contrasting view. I don't understand animating with css so I would love
to see "this is how you would accomplish the same thing using javascript",
which I (without understanding css animation) believe is the right tool.

But of course, houndres of insane trick-focused css gurus churning out
millions of crazy tech demos... Surely someone will find out some novel, more
useful technique that we conservative programmers will begin to use for making
the boring shit we do less burdensome. So I'm all for it really, despite my
initial negative tone.

