Animations Overview

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

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