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.
Übernommen wird das Geschriebene, sobald Sie den Editor verlassen — also mit dem Klick irgendwo außerhalb des Code-Bereichs. Ist das JSON dabei fehlerhaft, erscheint unter dem Editor eine rote Meldung mit der Fundstelle, und die Animation bleibt auf ihrem letzten gültigen Stand. Ihr Text bleibt stehen, sodass Sie die Stelle korrigieren können; mit dem nächsten Verlassen des Editors verschwindet die Meldung.
Der Editor färbt das JSON ein und hebt zusammengehörige Klammern hervor. Fehlt eine Klammer oder ein Komma, wird die Stelle schon beim Tippen rot unterringelt und am linken Rand markiert — ein Klick auf die Markierung nennt den Grund. Sie müssen den Editor also nicht erst verlassen, um zu sehen, dass etwas nicht stimmt.
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.