An elevator simulation is implemented entirely with modern CSS features to model state, movement, and timing without JavaScript. CSS custom properties store state like current floor, previous floor, relative speed, and direction. @property is used to register typed custom properties so the browser can interpolate numeric values and animate transitions smoothly. Counters and pseudo-classes provide interactive controls, direction indicators, animated transitions, and countdowns. Accessibility considerations are integrated through CSS-driven controls and indicators. The result is a responsive, interactive elevator that knows its position, destination, and estimated timing through declarative CSS alone.
The backbone of this elevator system is the use of CSS custom properties to track its state. Below, I define several @property rules to allow transitions and typed values: @property --current-floor { syntax: ""<integer>"; initial-value: 1; inherits: true; } @property --previous { syntax: ""<number>"; initial-value: 1; inherits: true; } @property --relative-speed { syntax: ""<number>"; initial-value: 4; inherits: true; } @property --direction { syntax: ""<integer>"; initial-value: 0; inherits: true; }
These variables allow me to compare the elevator's current floor to its previous one, calculate movement speed, and drive animations and transitions accordingly. A regular CSS custom property (--current-floor) is great for passing values around, but the browser treats everything like a string: it doesn't know if 5 is a number, a color, or the name of your cat. And if it doesn't know, it can't animate it. That's where @property comes in. By "registering" the variable, I can tell the browser exactly what it is (<number>, <length>, etc.), give it a starting value, and let it handle the smooth in-between frames.
Collection
[
|
...
]