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