HandyTools Hub

Cubic-Bezier-Generator

CSS-Timing-Funktionen visuell gestalten und den cubic-bezier-Wert kopieren

Ziehen Sie die beiden Kontrollpunkte, um die Kurve zu formen. Horizontal bleibt der Punkt im Kasten; vertikal darf er für Überschwing-Effekte darüber hinaus.

Ihre Kurve

Linear (Referenz)

 
 
 
  
Anleitung


    

  1. Kontrollpunkte ziehen — Einen der runden Griffe im Kurven-Editor fassen und bewegen. Horizontal bleibt der Punkt im Einheitskasten; vertikal darf er für Bounce-Effekte darüber hinaus.
    2. 

  2. Mit einer Vorlage starten — Eine Vorlage anklicken (ease, ease-in-out, easeOutBack und mehr), um deren Kontrollpunkte zu laden, dann per Ziehen feinabstimmen.
    3. 

  3. Die Kurve beobachten — Die blaue Kurve ist die Timing-Funktion selbst; die gestrichelte Diagonale zeigt linear zum Vergleich.
    4. 

  4. Vorschau abspielen — „Vorschau abspielen” animiert einen Punkt mit einer echten CSS-Transition, die exakt Ihren cubic-bezier-Wert verwendet — daneben ein linearer Referenzpunkt.
    5. 

  5. CSS kopieren — Die Ausgabe aktualisiert sich live als cubic-bezier(x1, y1, x2, y2); kopieren und in das Stylesheet einfügen.
    6. 



Funktionen


    

  • Ziehbarer Kurven-Editor — Zwei Kontrollpunkte mit einheitlicher Maus- und Touch-Unterstützung (Pointer Events), live auf Canvas gezeichnet mit Raster und Linear-Referenz.
    • 

  • Überschwingen möglich — Der y-Wert der Kontrollpunkte darf außerhalb von [0,1] liegen, sodass Back-Easings wie easeOutBack voll ausdrückbar sind; x bleibt wie in der CSS-Spezifikation auf [0,1] begrenzt.
    • 

  • 22 eingebaute Vorlagen — Die CSS-Schlüsselwort-Easings (ease, ease-in, ease-out, ease-in-out, linear) plus klassische benannte Easings: die Quad-, Cubic-, Quart-, Sine-, Expo-, Circ- und Back-Familien.
    • 

  • Ehrliche Vorschau — Der Punkt wird von einer echten CSS-Transition mit Ihrem generierten Wert animiert — was Sie sehen, ist exakt das, was der Browser tut.
    • 

  • Live-CSS-Ausgabe — Der cubic-bezier(...)-Wert aktualisiert sich bei jeder Bewegung und lässt sich mit einem Klick kopieren.
    • 

  • 100 % clientseitig — Alles läuft in Ihrem Browser; keine Daten verlassen Ihr Gerät.
    • 



Anwendungsfälle


    

  • Mikro-Interaktionen: Ein knackiges Ease-out für Buttons und Schalter abstimmen und das Gefühl vorab mit dem Live-Punkt prüfen.
    • 

  • Bounce-Effekte: Den zweiten Kontrollpunkt über den Kasten hinausziehen, um Überschwingen für Modals, Toasts und verspielte UI zu gestalten.
    • 

  • Design-Vorgaben nachbauen: Benannte Easings aus Design-Systemen (Material, easeOutBack-artige Bewegung) nachstellen und den exakten Wert kopieren.
    • 

  • Timing-Funktionen lernen: Von einer Vorlage ausgehen, jeweils nur einen Kontrollpunkt bewegen und beobachten, wie Kurve und Animation sich gemeinsam verändern.
    • 



Verwandte Tools


Häufig gestellte Fragen
Was bedeuten die vier Zahlen in cubic-bezier(x1, y1, x2, y2)?
Es sind die Koordinaten der beiden Kontrollpunkte einer kubischen Bezier-Kurve, die an (0,0) und (1,1) verankert ist: x1, y1 ist der erste Kontrollpunkt, x2, y2 der zweite. Die x-Achse steht für den Zeitfortschritt, die y-Achse für den Ausgabefortschritt der Animation — die Form der Kurve beschreibt also, wie die Animation beschleunigt und abbremst.
Warum darf y über 1 oder unter 0 liegen, x aber nicht?
Die x-Koordinaten der Kontrollpunkte müssen in [0,1] bleiben, weil Zeit nicht rückwärts laufen kann — die Kurve muss eine Funktion des Fortschritts bleiben. Die y-Koordinaten sind frei: Werte über 1 lassen die Animation über das Ziel hinausschießen, bevor sie sich einpendelt (easeOutBack), Werte unter 0 ziehen sie zuerst zurück (easeInBack). Genau so entstehen Bounce- und Anticipation-Effekte.
Wo kann ich den generierten cubic-bezier-Wert verwenden?
Überall, wo CSS eine Timing-Funktion akzeptiert: transition-timing-function, animation-timing-function oder die Kurzschriften transition und animation. Einfach einfügen, z. B. transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);