Animations Overview 1.2.2

VelinStyle provides a composable animation system with entrance, attention, exit, scroll-driven, and view transition utilities — all CSS-only. Deutsch: Animationen Überblick

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Prefer CSS classes (.velin-animate-*) for one-shot entrance / attention / exit.
Use initMotion() + velin-reveal attributes for scroll-triggered reveals.
Always honour prefers-reduced-motion — CSS and the motion runtime both do.

When not

Do not animate essential content in a way that blocks interaction.
Do not stack many simultaneous transforms / filters on large lists (layout thrash).
Do not treat Design Intelligence plan/review as required for CSS motion — they are unrelated beta surfaces.

Animation System

Animations are applied with a base class and optional modifier classes for duration, delay, easing, iteration, and fill mode:

<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>

Modifiers

Modifier	Values
`.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

Reduced Motion

VelinStyle respects prefers-reduced-motion: reduce. When enabled, all animations are replaced with instant transitions (duration set to 1ms). No JavaScript required.

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

Two layers

Layer	Maturity	When
CSS utilities (`.velin-animate-*`, transitions, tokens)	stable	Declarative, zero JS
Motion runtime (`@birdapi/velinstyle/motion`)	stable	In-view reveals, stagger, smooth scroll via attributes
Scroll-driven / View Transitions	stable (browser-gated)	Progressive enhancement; CSS fallbacks where needed

Attribute bridges (velin-reveal, …) are documented in Motion & attributes.

Motion runtime (performance)

One shared IntersectionObserver; visibility updates batched with requestAnimationFrame.
On prefers-reduced-motion: reduce, elements are marked visible immediately — no observer work.
Opt out per subtree with data-velin-motion="off".
Import: import { initMotion } from '@birdapi/velinstyle/motion' or enable via bootFromDOM(document, { attributes: true }).

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