Animation-Editor (Properties)
Diese Seite ist die Property-Referenz zum Animation-Bereich. Sie zeigt, welche CSS-Eigenschaften Sie pro Möglichkeit animieren können.
Aufbau
Pro Möglichkeit pflegen Sie eine Liste von Properties. Jedes Property hat:
Feld | Bedeutung |
|---|---|
Property | Das CSS-Property (z.B. |
Wert | Zielwert beim Auswählen dieser Möglichkeit |
Übergang | Optional: Easing / Dauer der Animation |
Sie können beliebig viele Properties pro Möglichkeit definieren. Beim Auswählen im Frontend animiert Confy alle gleichzeitig.
Property-Kategorien
- Anzeige & Sichtbarkeit
visible·display·opacity·visibility·pointerEvents- Position
position·top·right·bottom·left·z-Index·float·clear- Maße
width·height·min-width·min-height·max-width·max-height- Abstände
margin&marginTop/Right/Bottom/Left·padding&paddingTop/Right/Bottom/Left- Rahmen
border·borderWidth·borderStyle·borderColor·borderRadius·outline- Hintergrund
background·backgroundColor·backgroundSize·backgroundPosition·backgroundRepeat- Typografie
color·fontFamily·fontSize·fontWeight·lineHeight·textAlign·textDecoration·textTransform·letterSpacing·whiteSpace- Layout (Flex)
flex·flexDirection·justifyContent·alignItems·flexWrap·gap- Effekte
boxShadow·cursor·overflow·transform·transition
Wert-Eingaben
Je nach Property unterscheidet sich die Eingabe:
Pixel / Em / % — Zahl plus Einheit-Selector.
Farbe — Color-Picker mit Hex/RGB/RGBA.
Übergang — Easing-Funktion + Dauer in Millisekunden.
Boolean — Schalter (z.B.
visible).
Live-Vorschau
Sobald Sie ein Property hinzufügen oder ändern, sendet der Editor die Werte per postMessage an das Vorschau-Popup. Sie sehen das Ergebnis sofort — ohne speichern zu müssen.
Manueller Modus (Code-Editor)
Aktivieren Sie Manueller Modus, um den Property-Builder durch einen Code-Editor zu ersetzen, in dem Sie die Animations-Daten direkt als JSON schreiben oder einfügen können. Praktisch zum Reinkopieren von Vorlagen oder bei sehr eigenwilligen Wertekombinationen.
Reihenfolge der Properties
Die Reihenfolge in der Liste entspricht der Auswertungs-Reihenfolge im Frontend. Bei sich überschneidenden Effekten gewinnt das letzte Property der Liste.
Property entfernen
Klick auf das Mülltonnen-Icon am Property löscht es. Reihenfolge und Werte der anderen Properties bleiben unverändert.
Speichern
Animations-Daten werden mit der Konfiguration gespeichert. Klicken Sie in der Top-Bar auf Speichern, sobald Sie Ihre Properties pflegen wollen. Bei ungespeicherten Änderungen warnt Confy beim Verlassen.