by

Stupid CSS3 Tricks: Keeping time without JavaScript

Reading Time: < 1 minute

Another stupid CSS3 trick: Take a bucket-full of CSS3 -webkit animations, add in a table or two that you’ve marked up somewhat semantically, hit refresh and voilá, you have a way to keep track of how much time has passed without JavaScript.

Warning: Google Chrome only

Take a look at my CSS for the full idea, but basically, I created one animation and applied it three times, varying only the duration of the animation. All I’m doing is changing the height of a div inside of a table cell. Turns out, animations on background color don’t work too hot, and neither do animations on gradients. So the simple solution I could find was to place inside the table cell that one additional div and have it fill 100% of it’s container.

Feel free to fork it on github, too!