Motion
Duration and easing tokens. Three named durations (fast, normal, slow) paired with four cubic-bezier curves (standard, decelerate, accelerate, linear) cover every transition in the system.
Durations
| Token | Value | Use when |
|---|---|---|
| --kg-duration-instant | 50ms | Toggle visibility, tooltip show/hide |
| --kg-duration-fast | 100ms | Hover states, focus rings, color transitions |
| --kg-duration-normal | 200ms | Accordion, drawer open/close, panel slides |
| --kg-duration-slow | 300ms | Page transitions, modal entry, complex reveals |
| --kg-duration-slower | 500ms | Skeleton-to-content fades, onboarding animations |
Reduced motion
Under prefers-reduced-motion: reduce, all durations collapse to 0ms. Transitions remain active but are instantaneous, preventing layout jumps while honouring the user's preference.
Easings
Hover a row to preview the curve.
--kg-ease-linearlinearProgress bars, loading indicators — no momentum.
--kg-ease-standardcubic-bezier(0.4, 0, 0.2, 1)Default for most transitions — fast start, smooth decelerate.
--kg-ease-deceleratecubic-bezier(0, 0, 0.2, 1)Elements entering the screen — glide to a stop.
--kg-ease-acceleratecubic-bezier(0.4, 0, 1, 1)Elements leaving the screen — pick up speed and exit.
--kg-ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Playful overshoot — icon pops, selection feedback, celebratory UI.