Eintrittsanimationen 1.2.0

Elemente mit Fade-, Slide-, Scale-, Zoom-, Flip- und Drop-in-Effekten sichtbar machen. English: Entrance

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

First-Paint- und Section-Appear-Effekte mit .velin-animate-*-Klassen.
Mit Dauer-, Verzögerungs- und Ease-Modifiern aus dem Überblick kombinieren.

Wann nicht

prefers-reduced-motion bei dekorativer Bewegung nicht ignorieren.
Keine Attention-Loops auf großen Inhaltsbereichen verwenden — CSS-Tokens und kurze Dauern bevorzugen.

Fade In

<div class="velin-animate-fade-in">Fades in</div>
<div class="velin-animate-fade-in-up">Fades in from below</div>
<div class="velin-animate-fade-in-down">Fades in from above</div>
<div class="velin-animate-fade-in-left">Fades in from left</div>
<div class="velin-animate-fade-in-right">Fades in from right</div>

Slide

<div class="velin-animate-slide-up">Slides up</div>
<div class="velin-animate-slide-down">Slides down</div>
<div class="velin-animate-slide-left">Slides left</div>
<div class="velin-animate-slide-right">Slides right</div>

Scale & Zoom

<div class="velin-animate-scale-in">Scale from 0 to 1</div>
<div class="velin-animate-zoom-in">Zoom in from 50% scale</div>

Flip & Drop

<div class="velin-animate-flip-x">Flip on X axis</div>
<div class="velin-animate-flip-y">Flip on Y axis</div>
<div class="velin-animate-drop-in">Drop in from above with bounce</div>

Attribute & Runtime

Für Varianten, die beim Scrollen ausgelöst werden, velin-reveal / initMotion() bevorzugen — siehe Motion & attributes. Die CSS-Klassen hier bleiben ohne JS gültig.