It suddenly occurred to me last night, CSS should include a state machine.
In a subtle way, it already does with “:hover”.
The hover state is triggered based on the mouse cursor’s position. This very basic state allows designers to produce some interesting results.
One application for this system is multi-paged documents. By hiding pages inside divs with both hidden and display states defined, a designer could build a menu that flips through any number of pages without requiring a new page load (a server request). Just think, a complete website could be stored in a single .html document.
State change interpolation is a potential subsequent addition to CSS. Pretend you used states to create a menu that window shades on double click. If you toggled between hidden and display states to change the menu, the animation is going to jump instantly from one state to the other. However, if you could interpolate the menu height from 100% to 0% between two states, you could create a smooth animation.