Element · Foundations
Kurz, auslaufend, abschaltbar.
styles/global.css
Drei Dauern, eine Kurve. Hover 100, Button 150, Panel 300. Easing ease-out. Reduced Motion setzt Dauer auf 0,01ms — ASCII pausiert zusätzlich.
| Name | Token | Wert | Einsatz |
|---|---|---|---|
| fast | duration-fast | 100ms | Hover, Fokus, Ticker. |
| base | duration-base | 150ms | Button, Link, Default. |
| slow | duration-slow | 300ms | Panel, Sidebar. |
| ease | ease-out | 0.16, 1, 0.3, 1 | Eine Kurve. Kein linear außer ASCII-Loop. |
Fokus
:focus-visible, 2px Oliv-500, Offset 2px. Button ersetzt das durch den eigenen Ring. Cursor bleibt System: pointer auf Links und Buttons, text im Feld.
Fokus hier, dann TabReduced Motion
Global: Animation und Transition auf 0,01ms. ASCII: IntersectionObserver pausiert außerhalb, reduced-motion lässt das Canvas stehen.