Motion-Tokens 1.2.0

Duration and easing CSS variables for animations, transitions, and Web Component motion — stable in 1.2.0. English: Motion tokens

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Referenziere Motion-Duration- und Easing-Tokens für eigene CSS-Animationen.

Wann nicht

Bevorzuge die Guides zur Motion-Runtime / zu Attributen für scroll-gesteuerte oder JS-orchestrierte Motion.

Dauern

Token	Wert	Einsatzfall
`--velin-duration-instant`	50ms	Tap-Feedback, Hover-Zustandswechsel
`--velin-duration-fast`	100ms	Toggles, Popovers
`--velin-duration-normal`	200ms	Standard-Transitions
`--velin-duration-slow`	300ms	Modals, Drawers
`--velin-duration-slower`	500ms	Abschnitts-Reveals
`--velin-duration-slowest`	800ms	Sparkline-Area-Fade-in
`--velin-duration-cinematic`	1200ms	Hero-Reveals, Sparkline-Draw-in

Easings

Token	Kurve	Hinweise
`--velin-ease-default`	cubic-bezier(0.4, 0, 0.2, 1)	Weich im Material-Stil
`--velin-ease-in`	cubic-bezier(0.4, 0, 1, 1)	Beschleunigen
`--velin-ease-out`	cubic-bezier(0, 0, 0.2, 1)	Verlangsamen
`--velin-ease-in-out`	cubic-bezier(0.4, 0, 0.2, 1)	Weicher Start & weiches Ende
`--velin-ease-bounce`	cubic-bezier(0.34, 1.56, 0.64, 1)	Subtiler Overshoot
`--velin-ease-spring`	cubic-bezier(0.34, 1.56, 0.64, 1.4)	Starker Overshoot, genutzt vom FLIP-Filter
`--velin-ease-elastic`	cubic-bezier(0.68, -0.6, 0.32, 1.6)	Vorwegnehmender Snap
`--velin-ease-expo-out`	cubic-bezier(0.16, 1, 0.3, 1)	Cinematic decel — sparkline & counters
`--velin-ease-back-out`	cubic-bezier(0.34, 1.4, 0.64, 1)	Weicher Overshoot für Value-Bumps
`--velin-ease-snappy`	cubic-bezier(0.2, 0.8, 0.2, 1)	Schnelle UI-Affordance, Dropdowns

Verwendung

.card {
  transition: transform var(--velin-duration-slow) var(--velin-ease-expo-out);
}
.card:hover { transform: translateY(-4px); }

Reduzierte Bewegung

Der Basis-Reset berücksichtigt prefers-reduced-motion: reduce indem Animationsdauern auf 1ms begrenzt und alle Chart-/Filter-Motion global deaktiviert werden. Du musst Token-Nutzung nicht manuell absichern — utilities under Chart animation and Filtereffekte enthalten das Override bereits.

Runtime-Brücke

Attributgesteuerte Motion (velin-reveal, stagger, smooth scroll) nutzt diese Tokens über CSS-Klassen, die angewendet werden von @birdapi/velinstyle/motion. Siehe Motion & attributes.