CSS Clock
An experiment in using CSS3 animations. Currently, it fully works in the latest versions of Chrome and Safari only. Animation works in WebKit browsers, but Safari 4 does not seem to render negative timings in the animation properly, so the numbers roll over at the wrong intervals. Safari 5 seems to have fixed this problem. All other browsers will see a very boring static clock.
The time (GMT)
How it works
PHP is used to initialize the clock time. It's also used to calculate the timings for the animation and insert them into the CSS code. You can see these timings if you look at the source for this page -- there is a long list of keyframe animations, one for each digit. A custom animation timing (using a bezier curve) allows the animation to have a little more 'weight' instead of being a smooth motion. Once the page is rendered, it is up to the browser to render the CSS animation.
For the animation, each digit is a column of numbers, and the animation basically works by moving the column up by one digit per time segment. At the end of the animation it starts back at the beginning.
Some notes
Originally inspired by the PBS News Hour Gulf Oil Leak tracker, when I looked at it and wondered if how it could be created without using Javascript.
There is some debate on whether animations/transitions should be included in CSS3 specs, when such animations are currently possible using Javascript. This experiment doesn't care about the debate. It's just a test of how animation works without any active scripting on the page.