Cubic-bezier-Easing-Generator
Gestalte CSS-cubic-bezier-Easing-Kurven mit zwei ziehbaren Kontrollpunkten, Voreinstellungen, einer Live-Animationsvorschau und kopierfertigem Code, alles in deinem Browser.
Cubic-bezier-Easing-Generator wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Easing ist das, was eine Animation, die lebendig wirkt, von einer trennt, die mechanisch wirkt. In der realen Welt bewegt sich nichts mit konstanter Geschwindigkeit: Objekte beschleunigen beim Start, bremsen beim Anhalten ab und schießen manchmal über ihr Ziel hinaus, bevor sie sich beruhigen. CSS erfasst das mit der Timing-Funktion, und die flexibelste Timing-Funktion ist cubic-bezier, mit der du eine ganze Beschleunigungskurve mit nur vier Zahlen beschreiben kannst. Diese Zahlen definieren die beiden Kontrollpunkte einer Bezier-Kurve, deren horizontale Achse die Zeit und deren vertikale Achse der Fortschritt ist, und die Form dieser Kurve bestimmt genau, wie ein Element im Verlauf eines Übergangs oder einer Animation beschleunigt und abbremst.
Häufig gestellte Fragen
Wird etwas hochgeladen, wenn ich eine Easing-Kurve erstelle?
Was bedeuten die vier Zahlen in cubic-bezier?
Warum kann ich die Griffe über den oberen oder unter den unteren Rand ziehen, aber nicht nach links oder rechts aus dem Kasten heraus?
Was ist der Unterschied zwischen ease-in, ease-out und ease-in-out?
Wie erzeuge ich einen federnden oder springenden Effekt?
Zeigt die Vorschau die echte Bewegung?
Wo verwende ich den erzeugten Wert in meinem CSS?
Funktionieren benutzerdefinierte cubic-bezier-Kurven in allen Browsern?
Über Cubic-bezier-Easing-Generator
Das Problem mit cubic-bezier ist, dass die vier Zahlen im Kopf fast unmöglich vorstellbar sind. Ein Wert wie cubic-bezier(0.68, -0.55, 0.27, 1.55) bedeutet nichts, bis du die Kurve siehst, die er zeichnet, und die Bewegung, die er erzeugt. Dieser Generator macht das greifbar. Er zeigt die Kurve auf einem interaktiven Raster mit zwei ziehbaren Kontrollpunkten, die an Zeigerereignisse gekoppelt sind, sodass du die Griffe mit der Maus oder einem Finger ziehen und zusehen kannst, wie sich die Kurve in Echtzeit umformt. Die horizontale Position jedes Griffs ist auf den gültigen Bereich von null bis eins beschränkt, den die CSS-Spezifikation verlangt, während die vertikale Position frei ist, was die Antizipations- und Überschwingeffekte ermöglicht, bei denen der Fortschritt unter null fällt oder über eins steigt.
Eine Reihe von Voreinstellungen bietet dir die benannten CSS-Schlüsselwörter als Ausgangspunkte: linear für konstante Geschwindigkeit, ease für die sanfte Standardeinstellung sowie ease-in, ease-out und ease-in-out für die gängigen Beschleunigungsmuster. Von jeder Voreinstellung aus kannst du die Griffe ziehen, um das Gefühl zu verfeinern. Entscheidend ist, dass das Werkzeug eine Live-Vorschau enthält: Klicke auf die Spur oder die Wiedergabetaste, und ein Marker bewegt sich mit deiner exakten Kurve animiert darüber, sodass du die Bewegung danach beurteilst, wie sie sich tatsächlich bewegt, und nicht nach der Geometrie der Linie. Der erzeugte cubic-bezier-Wert und eine vollständige CSS-Deklaration werden laufend aktualisiert und mit einem Klick in die Zwischenablage kopiert.
Das gesamte Werkzeug läuft lokal in deinem Browser. Es gibt nichts hochzuladen, kein Konto und kein Tracking, und es funktioniert weiterhin offline, sobald die Seite geladen ist, denn die gesamte Aufgabe besteht darin, eine Kurve zu berechnen und eine kurze CSS-Zeichenkette zu erzeugen. Die Kombination aus einer sichtbaren Kurve, ziehbaren Punkten, benannten Voreinstellungen und einer echten Bewegungsvorschau verwandelt die abstrakte cubic-bezier-Syntax aus vier Zahlen in etwas, das du dich erfühlen kannst, was der schnellste Weg zu einem Easing ist, das in deiner Oberfläche richtig aussieht.
Von Autokarosserien zur Webanimation: das lange Leben der Bezier-Kurve
Die Mathematik hinter jeder CSS-Easing-Kurve wurde nicht für Bildschirme entwickelt, sondern für Blech. In den späten 1950er- und in den 1960er-Jahren brauchten die französischen Autohersteller Renault und Citroen eine präzise Möglichkeit, die glatten, fließenden Oberflächen von Karosserien zu beschreiben, damit sie genau gefertigt werden konnten. Pierre Bezier, ein Ingenieur bei Renault, machte die Kurven, die heute seinen Namen tragen, bekannt und veröffentlichte sie, während Paul de Casteljau, der im Geheimen bei Citroen arbeitete, unabhängig dieselben Ideen und den eleganten Algorithmus zu ihrer Auswertung entwickelte. Da de Casteljaus Arbeit vertraulich gehalten wurde, wurden die Kurven als Bezier-Kurven bekannt.
Die zentrale Erkenntnis ist, dass eine komplexe Kurve durch eine kleine Anzahl von Kontrollpunkten definiert werden kann, wobei die Kurve durch die Endpunkte verläuft und zu den dazwischenliegenden Punkten hingezogen wird, aber nicht durch sie hindurch. Das machte Bezier-Kurven perfekt für das aufkommende Gebiet der Computergrafik. Sie wurden zur Grundlage des Vektorzeichnens in PostScript und PDF, des Zeichenstift-Werkzeugs in jedem Illustrationsprogramm, der Umrisse der Schriftarten, die du gerade liest, und der Bewegungspfade in Animationssoftware. Eine Handvoll Kontrollpunkte kann fast jede glatte Form oder Bewegung beschreiben, was genau die Sparsamkeit ist, nach der die Ingenieure der 1960er-Jahre suchten.
CSS übernahm eine kubische Bezier-Kurve, eine mit zwei Kontrollpunkten zwischen festen Endpunkten, als seine Timing-Funktion, weil sie das gesamte Vokabular natürlicher Bewegung mit nur vier Zahlen erfasst. Die benannten Schlüsselwörter sind keine eigenständigen Mechanismen, sondern lediglich bequeme Bezeichnungen für bestimmte cubic-bezier-Werte: ease ist cubic-bezier(0.25, 0.1, 0.25, 1), und linear ist cubic-bezier(0, 0, 1, 1). Wenn du die Griffe in einem Werkzeug wie diesem ziehst, manipulierst du dieselben Kontrollpunkte, die ein Automobilingenieur einst zum Formen eines Kotflügels verwendete, und biegst nun Zeit und Fortschritt statt Metall, um eine Oberfläche reaktionsschnell und lebendig wirken zu lassen.