Description

Learn to make a stopwatch in CSS3.

This tutorial focuses on step based CSS3 keyframe animation, along with the usage of the animation-play-state property to start/stop/reset the stopwatch.

The animation-play-state property may be removed because it can be replicated using other methods and is currently not supported in all browsers, but the idea behind the functionality of the stopwatch is worth learning.

The only image used is the background wood pattern(just for beautification purpose). The JS used is prefixfree - just to make the length and size of the tutorial short and easy. No images or JS are used in the stopwatch logic/display.

The code can be modified and enhanced to be used as timers, countdowns, counters, etc.