View Animation

Die View-Animation startet, wenn das Element sichtbar wird und endet, sobald es den sichtbaren Bereich verlässt.

Sofern die Effekte noch nicht installiert sind, installieren Sie sie bitte über die + Schaltfläche im Effekte-Auswahldialog.

Die Viewanimations-Effekte sind über CSS-Stilklassen realisiert. Jedes Element erhält die Stilklasse viewanim-effects und den Namen des Effekts zugewiesen. Einzelne Parameter können über CSS-Variable übersteuert werden.

Um hier Änderungen vorzunehmen sind gute CSS-Kenntnisse erforderlich.

Die Steuerung erfolgt über @keyframes - Definitionen und CSS-Variable.

Keyframes:

• viewanim-0-100
• viewanim-50
• viewanim-10-90
• viewanim-25-75
• viewanim-33-67
• viewanim-25-50-75

Die Zahlen geben die Keyframes-Schritte in Prozent an (Die Schritte 0% und 100% sind implizit immer enthalten).

In jedem Schritt werden die Stile transform, filter, opacity, offset-path, offset-distance und clip-path über korrespondierende CSS-Variable definiert.

Allgemeine Einstellungen:

--va-transform-origin (default: center center)

--va-animation (default: viewanim-0-100)

--va-animation-timeline (default: view()

--va-animation-range (default: cover 0% cover 0%)

--va-animation-fill-mode (default: both)

--va-offset-anchor (default: auto)

--va-offset-position (default: auto)

--va-offset-rotate (default: auto)

--va-clip-rule (default: even-odd)

Startwerte:

--va-0-transform

--va-0-filter

--va-0-opacity

--va-0-offset-path

--va-0-offset-distance

--va-0-clip-path

Endwerte:

--va-100-transform

--va-100-filter

--va-100-opacity

--va-100-offset-path

--va-100-offset-distance

--va-100-clip-path

Zwischenwerte bei 10%, 25%, 33%, 50%, 67%, 75% und 90%

Variable wie unter Startwerte, nur mit Prefix --va-10-, --va-25-, --va-33-, etc...