Easing-Kurven-Editor
Easing Curve Editor
Bearbeitet eine cubic-bezier- oder Feder-Kurve gegen eine animierte Vorschau und gibt die CSS-Timing-Funktion aus.
Zieht eine kubische Bézier-Easing-Kurve und zeigt, was sie mit echter Bewegung macht – ein Block, den der Compositor des Browsers selbst animiert, plus ein Streifen derselben Kurve, in gleichmäßigen Zeitschritten abgetastet, sodass die Form lesbar ist und nicht nur gefühlt.
Ziehen Sie einen der beiden Punkte, oder fokussieren Sie einen und nehmen Sie die Pfeiltasten — mit Shift geht es in zehnfachen Schritten. Das schattierte Band reicht von 0 bis 1; der Platz darüber und darunter ist das Überschwingen, das es nur gibt, weil CSS x begrenzt und y frei lässt.
X ist auf 0–1 begrenzt, weil CSS es so verlangt: außerhalb dieses Bereichs ist die ganze Deklaration ungültig und der Browser verwirft sie. Y ist absichtlich frei — Werte über 1 ergeben ein Überschwingen, Werte unter 0 ein Ausholen, und das ist der Hauptgrund, warum überhaupt jemand eine Kurve von Hand bearbeitet.
Der Streifen darunter ist dieselbe Kurve, abgetastet in zwanzig gleich langen Zeitschritten. Dicht stehende Marken heißen, dass die Animation dort langsam ist, weit auseinanderliegende, dass sie schnell ist — die Form der Kurve als Bewegung ausgedrückt.
Vorlagen
CSS
transition: all 900ms cubic-bezier(0.34, 1.56, 0.64, 1);So funktioniert es
Ziehen Sie die beiden Kontrollpunkte
Oder fokussieren Sie einen und verwenden Sie die Pfeiltasten – mit Umschalttaste geht es zehnmal so weit. Die Zahlen darunter nehmen getippte Werte an, wenn Sie eine Kurve zu reproduzieren haben.
Beobachten Sie den Streifen, nicht den Block
Ein bewegter Block ist schwer zu lesen. Die Markierungen darunter sind die Kurve bei zwanzig gleichen Zeitschritten: gedrängt heißt langsam, gespreizt heißt schnell.
Kopieren Sie den Wert oder die ganze Transition
Landen Ihre Punkte genau auf einem Schlüsselwort – `ease`, `ease-in-out` –, wird stattdessen dieses Schlüsselwort ausgegeben, weil es kürzer ist und die Absicht sagt.
Häufige Fragen
Warum kann ich x nicht außerhalb von 0–1 ziehen?
Weil CSS es verbietet. Ein x außerhalb dieses Bereichs macht die ganze Deklaration ungültig, und der Browser verwirft die Eigenschaft – das Werkzeug begrenzt also, statt Sie etwas bauen zu lassen, das stillschweigend nichts tut.
Wofür ist y außerhalb von 0–1?
Überschwingen über 1 – das Element geht über sein Ziel hinaus und pendelt sich zurück – und Vorausbewegung unter 0, bei der es zurückzieht, bevor es sich bewegt. Diese beiden sind der größte Teil des Grundes, warum überhaupt jemand eine Kurve bearbeitet, statt ein Schlüsselwort zu nehmen.
Ist die Vorschau genau?
Ja – sie übergibt die Timing-Funktion als CSS-Animation an den Browser, und das ist derselbe Codepfad, den Ihre `transition` nehmen wird. Die Kurve in einer JavaScript-Schleife abzutasten sähe ähnlich aus und wäre nicht dasselbe.
Bekomme ich eine Feder oder einen Aufprall?
Keinen echten. Eine kubische Bézier-Kurve hat zwei Kontrollpunkte und kann einmal überschwingen; eine Feder schwingt und braucht `linear()` mit vielen Stützstellen oder eine physikbasierte Animationsbibliothek. Das Überschwingen hier ist das Nächste, was eine einzelne Kurve erreicht.
Eingabe aus
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
CSS formatieren und minimieren
CSS Beautifier & Minifier
Formatiert oder minimiert CSS, ohne etwas umzusortieren – der Token-Strom bleibt exakt erhalten.
Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
SVG-Pfad-Editor
SVG Path Editor
Wandelt Pfaddaten zwischen absoluten und relativen Befehlen um, verschiebt, skaliert, dreht und kehrt sie um und zeigt die Bounding-Box mit Live-Vorschau.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.