Draft, not published
Lab · 4 parts
CSS Shine Lab
A hands-on lab in four parts on the modern CSS that makes software feel considered. Play with each technique running for real.
- Innovation
We use CSS every day, and we build good-looking software. What we rarely make time for is the last layer of polish, the part that makes an interface feel considered, not just functional. That is what we mean by shine: small, deliberate movement and detail that make software feel alive to use.
Shine has always been the thing that gets squeezed. Features and fixes came first, rightly, and there was rarely time left for the rest. AI changes that arithmetic. It writes code faster, which frees us to spend more of our attention on craft. And because models are trained on a great deal of code, some of this shine now turns up in our work whether we asked for it or not, so we need to know it well enough to tell the good from the bad and to apply it on purpose.
This lab is us doing exactly that, in the open. It began as an innovation project, one of the ways we make time to get better. Each part takes one modern CSS feature, explains when to reach for it, and lets you play with it running for real. Every demo shows its own source, and every demo respects a reduced-motion preference.
- Part 1 The transition property Animate an element's property changes smoothly over time instead of snapping between states. The easiest way to start adding shine.
- Part 2 Keyframe animations Define a motion's waypoints once in an @keyframes rule and let it run on its own. Looping, multi-step motion a transition can't do.
- Part 3 The @starting-style rule The values an element animates from the first time it renders. The missing half of transition that lets things animate as they appear, even from display: none.
- Part 4 The View Transition API Animate between two views, a crossfade or a shared-element morph, by wrapping a DOM change so the browser tweens the old state into the new one.