Aufmerksamkeitsanimationen 1.2.0

Den Blick der Nutzerinnen und Nutzer mit wiederholten oder einmaligen aufmerksamkeitsstarken Animationen lenken. English: Attention

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

Kurze Aufmerksamkeitshinweise (Pulse, Shake, Bounce) auf Controls oder Statusindikatoren.
Wiederholungen niedrig halten; Tokens aus Motion tokens bevorzugen.

Wann nicht

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

Verfügbare Animationen

<div class="velin-animate-bounce">Bounce</div>
<div class="velin-animate-pulse">Pulse (scale throb)</div>
<div class="velin-animate-shake">Shake (horizontal)</div>
<div class="velin-animate-wiggle">Wiggle (rotation)</div>
<div class="velin-animate-ping">Ping (ripple)</div>
<div class="velin-animate-spin">Spin (360° infinite)</div>
<div class="velin-animate-rubber-band">Rubber Band</div>
<div class="velin-animate-jello">Jello (skew wobble)</div>
<div class="velin-animate-heartbeat">Heartbeat</div>
<div class="velin-animate-swing">Swing (pendulum)</div>
<div class="velin-animate-tada">Tada (scale + rotate)</div>

Endlosschleifen

Standardmäßig laufen spin und ping unendlich. Andere Animationen spielen einmal ab. Füge .velin-iterate-infinite hinzu, um jede Animation zu wiederholen:

<div class="velin-animate-bounce velin-iterate-infinite">
  Bouncing forever
</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.