Animationen Überblick 1.2.0

VelinStyle bietet ein kombinierbares Animationssystem für Eintritt, Aufmerksamkeit, Austritt, scroll-gesteuerte Animationen und View Transitions — vollständig CSS-only. English: Animations

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Design Intelligence (Plan / Review / Agent Meta) ist getrennt und dort beta / foundation, wo es markiert ist.

Wann verwenden

CSS-Klassen (.velin-animate-*) für einmalige Eintritts-, Aufmerksamkeits- und Austrittsanimationen bevorzugen.
initMotion() + velin-reveal-Attribute für Reveal-Effekte beim Scrollen verwenden.
prefers-reduced-motion immer respektieren — CSS und Motion-Runtime tun das beide.

Wann nicht

Wesentliche Inhalte nicht so animieren, dass Interaktion blockiert wird.
Nicht viele gleichzeitige Transforms / Filter auf großen Listen stapeln (Layout Thrash).
Design-Intelligence-Plan/Review nicht als Voraussetzung für CSS-Motion behandeln — das sind getrennte Beta-Oberflächen.

Animationssystem

Animationen werden mit einer Basisklasse und optionalen Modifier-Klassen für Dauer, Verzögerung, Easing, Wiederholung und Fill Mode angewendet:

<div class="velin-animate-fade-in velin-duration-500 velin-delay-200 velin-ease-out">
  Fades in with 500ms duration, 200ms delay, ease-out
</div>

Modifier

Modifier	Werte
`.velin-duration-{ms}`	75, 100, 150, 200, 300, 500, 700, 1000
`.velin-delay-{ms}`	75, 100, 150, 200, 300, 500, 700, 1000
`.velin-ease-{fn}`	linear, in, out, in-out, bounce, spring
`.velin-iterate-{n}`	1, 2, 3, infinite
`.velin-fill-{mode}`	none, forwards, backwards, both

Reduzierte Bewegung

VelinStyle respektiert prefers-reduced-motion: reduce. Wenn aktiviert, werden alle Animationen durch sofortige Übergänge ersetzt (Dauer auf 1ms gesetzt). Kein JavaScript erforderlich.

@media (prefers-reduced-motion: reduce) {
  .velin-animate-fade-in,
  .velin-animate-slide-up,
  /* ...all animation classes... */ {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

Zwei Ebenen

Ebene	Reifegrad	Wann
CSS-Utilities (`.velin-animate-*`, Transitions, Tokens)	stable	Deklarativ, ohne JS
Motion-Runtime (`@birdapi/velinstyle/motion`)	stable	In-View-Reveals, Stagger, Smooth Scroll per Attribut
Scroll-driven / View Transitions	stable (browser-gated)	Progressive Enhancement; CSS-Fallbacks, wo nötig

Attribute-Bridges (velin-reveal, …) sind in Motion & attributes dokumentiert.

Motion-Runtime (Performance)

Ein gemeinsamer IntersectionObserver; Sichtbarkeitsupdates werden mit requestAnimationFrame gebündelt.
Bei prefers-reduced-motion: reduce werden Elemente sofort als sichtbar markiert — ohne Observer-Arbeit.
Pro Teilbaum mit data-velin-motion="off" deaktivierbar.
Import: import { initMotion } from '@birdapi/velinstyle/motion' oder Aktivierung über bootFromDOM(document, { attributes: true }).

Motion tokens · Transitions · Chart animation
Motion & attributes · Core modules