Motion
Beweging laat zien wat er verandert, niet meer. Twee duren, twee easings, overgenomen van pieterdekroon.com.
Tokens
| Token | Waarde | Gebruik |
|---|---|---|
--duration-fast | 150ms | Hover, kleur- en randovergangen |
--duration-base | 280ms | Elementen die binnenkomen: dialog, paneel, sheet |
--stagger | 140ms | Vertraging per element bij een reeks die verschijnt |
--ease-standard | cubic-bezier(.4, 0, .2, 1) | Overgangen binnen een element |
--ease-out | cubic-bezier(.2, .7, .2, 1) | Binnenkomen: snel start, zachte landing |
Zien
Speel af om het verschil te zien. Bij "beweging verminderen" in je systeeminstellingen blijft alles stil.
ease-standard · 280ms
ease-out · 280ms
Regels
Geen beweging zonder reden. Een element dat binnenkomt mag schuiven en vervagen, een hover verandert alleen kleur of rand.
Geen bounce, geen veereffecten, geen beweging die langer duurt dan 280ms. Inhoud staat altijd zichtbaar op de pagina en wacht nooit op een animatie.
Respecteer prefers-reduced-motion: dan alleen nog een opacity-overgang, of niets.