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 :-)
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...
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!
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 :)
Goes absolutely bat shit in IE11 flickering and all sorts going on.
Then again what do I expect?
Works fine in Chrome and Firefox.
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?
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.
I love how the stop button is just a link to the page. Smart.
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.
For me, the button font doesn't load and the background transisiotions are, as always, extremely sluggish. (Firefox 17 ESR)
Looks great and works on Chrome. The idea is pretty nice.
what does "pure CSS" mean? no javascript ?
The entire page color change hurts.
is something supposed to happen when I press play (safari, iPad)?
Great example of a cool trick using completely the wrong tool for the job.
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...
2. http://cssdeck.com/labs/css-panic-game