Zum Inhalt springen
TextArray1.87.0
100% lokal

CSS-Easing- und Übergangs-Generator

Erstelle eine CSS-Übergangszahl aus einer Kurvenvorgabe oder benutzerdefinierten cubic-bezier-Punkten, mit einer Textgrafik der Bewegung.

11
Ausgabe
Verwandte Tools
CSS clamp()-GeneratorEntwickler-Tools
CSS box-shadow-GeneratorEntwickler-Tools
CSS-Einheiten-UmrechnerEntwickler-Tools
i18n SchlüsseldiffEntwickler-Tools
TOML-zu-JSON-KonverterEntwickler-Tools
SQL zu JSONEntwickler-Tools
CSS-Easing- und Übergangs-Generator
Wähle die zu animierenden Eigenschaften, lege eine Dauer und Verzögerung fest, und dieses Werkzeug schreibt die Übergangszahl für dich – als einfaches CSS oder als Tailwind-Konfigurationsblock, den du in tailwind.config.js einfügen kannst. Es deckt die gängigen benannten Kurven ab (linear, ease, ease-in, ease-out, ease-in-out) sowie ease-out-back, eine Kurve, die über ihr Ziel hinausgeht, bevor sie sich absetzt, das kein nativer CSS-Schlüsselwort ist und immer als volle cubic-bezier()-Funktion geschrieben werden muss.
Unter der generierten Zahl zeichnet eine Textgrafik den Fortschritt der Kurve an jedem Punkt in der Zeit – von 0 am Anfang der Animation bis 1 am Ende, mit einem Balken für jedes Beispiel, sodass du die Beschleunigung und das Überschießen sehen kannst, ohne die Entwicklertools zu öffnen. Wechsle zu "Benutzerdefiniert cubic-bezier()" und gib deine eigenen vier Kontrollpunkte ein, um eine Kurve in der Vorschau anzuzeigen, die dir jemand übergeben hat oder die du aus einem Designtool kopiert hast. Der erste und dritte Punkt müssen auf der Zeitachse zwischen 0–1 bleiben (das ist eine CSS-Anforderung), aber die y-Werte können außerhalb von 0–1 liegen, was genau das ist, wie Bounce- und Back-Easings funktionieren.
Das Eigenschaftsfeld akzeptiert eine kommagetrennte Liste – transform, opacity, background-color oder eine benutzerdefinierte CSS-Eigenschaft wie --panel-width – und das Werkzeug schreibt eine Zeile pro Eigenschaft, damit die Zahl leicht zu scannen ist. Dauer und Verzögerung sind in Millisekunden. Die Anzahl der Diagrammzeilen ist von 2 bis 41 einstellbar für eine gröbere oder feinere Lesung der Kurve.
Alles wird lokal in deinem Browser ausgeführt: Nichts, was du eingibst, wird irgendwo hingesendet. Kopiere das Ergebnis, lade es als .txt-Datei herunter oder sende die Ausgabe direkt zurück in die Eingabe, um es weiter anzupassen.
Häufige Fragen
Was macht "ease-out-back" eigentlich?
Es übersteigt kurz den Endwert, bevor es sich wieder absetzt – nützlich für eine Karte, die leicht größer wird, bevor sie auf ihrer endgültigen Größe landet. Da es kein integriertes CSS-Schlüsselwort ist, schreibt der Generator es immer als vollständige cubic-bezier()-Funktion aus.
Warum begrenzt die benutzerdefinierte Kurve meine x-Werte, aber nicht meine y-Werte?
Die CSS-Spezifikation erfordert, dass die beiden x-Kontrollpunkte eines cubic-bezier() zwischen 0 und 1 bleiben, damit die Zeit immer vorwärts geht. Die y-Kontrollpunkte können frei außerhalb dieses Bereichs liegen, was genau das ist, wie Overshoot- und Bounce-Effekte entstehen.
Was bedeuten die Zahlen in der Grafik?
Jede Zeile ist ein Beispiel in der Zeit, von t=0 (Animationsbeginn) bis t=1 (Animationsende), mit dem Ausgabewert der Kurve in diesem Moment und einem Balken, der dafür dimensioniert ist – eine Zeile mit einem Wert über 1 oder unter 0 zeigt also die Kurve, die über ihr Ziel hinausgeht.
Kann ich die Tailwind-Ausgabe direkt verwenden?
Ja. Es ist ein einsatzbereiter theme.extend-Block für tailwind.config.js, mit der Dauer, Verzögerung, Eigenschaftsliste und Timing-Funktion jeweils unter einem "custom"-Schlüssel, den du zur Anpassung an deine Design-Token umbenennen kannst.
Wird meine CSS irgendwo hochgeladen?
Nein. Die Übergangszahl und die Kurvengrafik werden beide vollständig in deinem Browser generiert – nichts, was du hier eingibst, wird auf einen Server gesendet.