Wählen Sie, was sich wie lange ändert, beschreiben Sie den Zielzustand und schalten Sie die Vorschau um, bevor Sie die beiden erzeugten Regeln kopieren.
Läuft lokal in deinem BrowserDer Generator liefert ein Regelpaar: eine Basisregel mit der Transition-Kurzschrift — Eigenschaft, Dauer, Kurve und Verzögerung — und eine Zielregel mit Transformation, Deckkraft, Hintergrundfarbe und Filter, in die das Element übergeht. Das Umschalten des Vorschau-Elements führt genau dieses Paar auf einem echten DOM-Knoten aus.
Jeder Regler wird so ausgegeben, wie es die Anzeige nennt. Werte bleiben in dem Bereich, der neben dem Feld steht, und ein geleertes Feld kehrt zu seinem letzten gültigen Wert zurück, statt eine Null zu exportieren. Die Berechnung läuft in der Seite: nichts wird hochgeladen, und das Werkzeug arbeitet offline weiter.
Die erste Regel enthält die Transition-Kurzschrift: welche Eigenschaft animiert, wie lange, mit welcher Kurve und welcher Verzögerung. Die zweite beschreibt den Zielzustand — Transformation, Deckkraft, Hintergrundfarbe und ein leichter Helligkeits- und Sättigungsfilter — und wird beim Umschalten angewendet.
Animiert werden nur die Eigenschaften aus der Transitionsliste. Steht dort opacity, springen Transformation, Farbe und Filter der Zielregel in einem Schritt; bei all bewegt sich jeder abweichende Wert mit. Die Vorschau verhält sich genauso.
Der Auswähler bietet all, transform, opacity, background-color und filter — die fünf Dinge, die das Vorschau-Element ändert. Eine einzelne Angabe hält die Liste kurz, was ein Hover- oder Fokuszustand meist braucht; all ist die sichere Wahl beim Experimentieren.
Die Voreinstellungen laden diese Wahl mit: Hover lift animiert all, Fade animiert opacity, Zoom und Soft spin animieren transform, Color swap animiert background-color. Die übrigen Regler beschreiben trotzdem den Zielzustand, Sie können eine Voreinstellung also bearbeiten und behalten, was passt.
Die Dauer reicht von 0 bis 5000 ms, die Verzögerung von 0 bis 3000 ms; beide werden auf ganze Millisekunden gerundet. Die Kurvenliste enthält die fünf CSS-Schlüsselwörter und zwei kubische Bézier-Kurven, und die Anzeige nennt immer den Wert, der in der ausgegebenen Regel steht.
Weil die Zahlen auf den am Feld angegebenen Bereich begrenzt werden, trägt die ausgegebene Regel nie einen Wert, den der Browser verwirft oder anders liest — eine negative Zeit etwa gilt als Verzögerung, nicht als Dauer. Testen Sie die kopierten Regeln am echten Element: eine Transformation auf einem Vorfahren wirkt mit der animierten zusammen.