How to: Create a stopwatch using CSS3 without Javascript

Have you ever tried to create awesome/different things with CSS?. Try this one. Here I’d like to share an awesome tutorial focuses on step based CSS3 keyframe animation, along with the usage of the animation-play-state property to start/stop/reset the stopwatch.


This great CSS script developed by Ruby On Tails. According to developer, no images or JavaScript are used in the stopwatch logic/display. The only image used is the background wood pattern for beautification purpose and all the logics are implemented in CSS

For preview or download Stopwatch using CSS3 script please visit this link.