CSS Kubischer Bezier-Generator

Was eine Cubic-Bézier-Timing-Funktion eigentlich ist

In CSS bildet eine Timing-Funktion die verstrichene Zeit (Eingabe, von 0 am Animationsanfang bis 1 am Ende) auf einen Fortschrittswert ab (Ausgabe, konventionell auch 0 bis 1, darf aber überschießen). Die animierte Eigenschaft (opacity, translate, color, alles was CSS überblenden kann) interpoliert zwischen ihrem Start- und Endwert in dem Tempo, das die Timing-Funktion beschreibt. Lineares Timing bedeutet, dass die Eigenschaft sich mit konstanter Geschwindigkeit bewegt; die verschiedenen ease-Funktionen beschleunigen, verzögern oder beides. cubic-bezier(x1, y1, x2, y2) ist die allgemeine Form: eine Bézier-Kurve von (0,0) nach (1,1) mit zwei freien Kontrollpunkten P1 und P2, die du mit vier Zahlen angibst. Der Browser tastet Punkte entlang dieser Kurve ab, um den Fortschritt der Eigenschaft in jedem Frame der Animation zu bestimmen. Die vier Zahlen definieren zwei Kontrollpunkte: P1 = (x1, y1) formt den Anfang der Kurve (typischerweise 0–1 auf beiden Achsen), P2 = (x2, y2) formt das Ende. x-Werte müssen in [0, 1] bleiben, damit die Kurve eine eindeutige Funktion der Zeit ist; y-Werte können [0, 1] überschreiten, um Übersprung- und Sprungeffekte zu erzeugen (ein y von 1,2 bedeutet, dass die Eigenschaft kurzzeitig ihren Zielwert übersteigt, bevor sie sich einpendelt).

Bézier-Kurven, mathematische Abstammung

Die Kurven sind nach Pierre Bézier benannt, einem französischen Ingenieur bei Renault, der sie in den 1960ern verwendete, um die glatten Karosseriebleche des Renault 16 zu entwerfen, 1968 als Teil von Renaults UNISURF-CAD-System veröffentlicht. Die Mathematik wurde unabhängig schon einige Jahre früher (1959) von Paul de Casteljau bei Citroën entwickelt, aber Citroën hielt de Casteljaus Arbeit als Geschäftsgeheimnis und Béziers veröffentlichte Version wurde zur kanonischen Referenz. Beide konvergierten auf dieselbe Familie von Polynomkurven, die durch Kontrollpunkte definiert sind, der de-Casteljau-Algorithmus zur Auswertung einer Bézier-Kurve an einem gegebenen Parameter ist nach dem unveröffentlichten Pionier benannt. Kubische Bézier-Kurven wurden zur universellen Primitive der Vektorgrafik, weil sie billig auszuwerten sind (ein paar Multiplikationen und Additionen), trivial skalierbar sind (die Mathe ist invariant unter affinen Transformationen) und lokal kontrollierbar (das Verschieben eines Kontrollpunkts ändert nur nahegelegene Kurvensegmente). Adobe PostScript (1984) und PDF, die SVG-Spezifikation (W3C-Recommendation September 2001) und jedes moderne Schriftformat verwenden kubische Bézier-Kurven als Baustein für Buchstaben, Icons und Illustrationen. CSS übernahm denselben Kurventyp für Animations-Timing, die Standard-mathematische Primitive der visuellen Designwelt für den neuen Anwendungsfall, Bewegung zu beschreiben.

Die CSS-Animation-Spec und Timing-Funktionen

CSS-Animationen und -Übergänge verwenden beide dieselbe Familie von Timing-Funktionen. Die CSS Animations Level 1 Spec wurde erstmals als öffentlicher Working Draft im März 2009 veröffentlicht (extrahiert aus früheren WebKit-präfixierten Implementierungen) und wird weiterhin von der W3C CSS Working Group gepflegt. Das Modul CSS Easing Functions Level 1 formalisiert die Timing-Funktion-Syntax und ist derzeit Candidate Recommendation. Fünf benannte Schlüsselwörter sind Aliase für spezifische Cubic-Beziers: ease = cubic-bezier(0.25, 0.1, 0.25, 1): der CSS-Standard für Übergänge, mit schnellem Start und langsamem Ende, das sich für die meisten UI-Bewegungen natürlich anfühlt. ease-in = cubic-bezier(0.42, 0, 1, 1): startet langsam, beschleunigt zu einem schnellen Ende. ease-out = cubic-bezier(0, 0, 0.58, 1): schneller Start, verzögert zu einem langsamen Ende; das ist im Allgemeinen das meist genutzte Easing für UI-Elemente, die in den Viewport eintreten. ease-in-out = cubic-bezier(0.42, 0, 0.58, 1): symmetrische S-Kurve, langsam an beiden Enden. linear = cubic-bezier(0, 0, 1, 1): kein Easing, konstante Rate; selten die richtige Wahl für UI, aber angemessen für kontinuierliche Schleifenanimationen wie Spinner. CSS bietet auch zwei nicht-Bézier-Timing-Optionen: steps(n, jumpterm) für gestufte (Frame-by-Frame-)Animation und linear() (in CSS Easing Level 2 hinzugefügt) für stückweise lineare Funktionen, die jede beliebige Kurve approximieren.

Easing-Kurven von Designsystemen

Große Designsysteme veröffentlichen meinungsstarke Easing-Kurven, die die CSS-Defaults überschreiben. Google Material Design spezifiziert „standard easing“ als cubic-bezier(0.4, 0, 0.2, 1): schnelle Beschleunigung, langsame Verzögerung, verwendet für die meisten UI-Übergänge in Android und der Web-Material-Bibliothek; „decelerated easing“ cubic-bezier(0, 0, 0.2, 1) für Elemente, die in den Bildschirm eintreten; „accelerated easing“ cubic-bezier(0.4, 0, 1, 1) für Elemente, die ihn verlassen. Apples Human Interface Guidelines betonen Spring-Physik-Animationen statt fester Bézier-Kurven, aber iOS' UIKit liefert einen Standard-Cubic-Bezier von ungefähr (0.25, 0.1, 0.25, 1) aus (dasselbe wie CSS ease). IBMs Carbon Design System verwendet cubic-bezier(0.5, 0, 0.1, 1) für seine produktive-Bewegung-Kategorie. Microsoft Fluent, Atlassian, Salesforce Lightning spezifizieren alle ihre eigenen Kurven. Robert Penners Easing-Gleichungen (2001 als Teil seines Buches über Flash-Bewegung veröffentlicht) definierten das Vokabular benannter Kurven, das nahezu jede Animationsbibliothek verwendet, easeInQuad, easeOutCubic, easeInOutSine, easeInQuart, easeOutBack, easeInOutBounce, easeInElastic. Die meisten lassen sich als Cubic-Beziers ausdrücken; die Elastic- und Bounce-Varianten nicht (sie erfordern mehrteilige stückweise Funktionen, weil sie schwingen).

Die richtige Kurve für den Job wählen

• Elemente, die in den Viewport eintreten (erscheinende Modals, hereingleitende Karten, sich öffnende Dropdowns), verwende ease-out oder eine verzögerte Kurve wie Materials cubic-bezier(0, 0, 0.2, 1). Das Element verzögert beim Ankommen, was sich anfühlt, als würde es sich „in seine Position einfinden“.
• Elemente, die den Viewport verlassen (sich schließende Modals, hinausgleitende Karten), verwende ease-in oder eine beschleunigte Kurve. Das Element beschleunigt beim Weggehen und fühlt sich an, als würde es mit Absicht weggehen.
• Kontinuierliche Animationen (Loader, Fortschrittsbalken, Umgebungsbewegung), verwende linear. Easing lässt kontinuierliche Bewegung ruckartig wirken; konstante Geschwindigkeit liest sich als gleichmäßig.
• Hover-Zustände und Buttondrücke: kurze Dauer (100-150 ms) mit ease-out für den Hover-in und ease-in oder kein Easing für den Hover-out. Button-Feedback sollte sich knackig anfühlen.
• Emphatische Bewegung mit Persönlichkeit (Toast-Benachrichtigungen, Erfolgsindikatoren), verwende eine leicht überschießende Kurve wie cubic-bezier(0.34, 1.56, 0.64, 1) für ein subtiles Springen, das signalisiert „gerade ist etwas Interessantes passiert“, ohne nervig zu sein.
• Längere Animationen (über 500 ms): verwende ease-in-out oder eine ähnliche S-Kurve. Lange Animationen mit einseitigem Easing fühlen sich an, als hätten sie einen falsch geformten Anfang oder ein falsch geformtes Ende.

Performance-Überlegungen

Benutzerdefinierte Cubic-Bezier-Timing-Funktionen kosten zur Laufzeit im Wesentlichen nichts, die Kurve ist eine Konstante, Browser berechnen die Lookup-Tabelle einmal vor, und die Pro-Frame-Auswertung sind ein paar Gleitkommaoperationen. Die Performance-Frage ist, welche Eigenschaft du animierst, nicht die Timing-Kurve. Das Animieren von transform (translate, scale, rotate) und opacity nutzt GPU-Compositing und bleibt selbst auf Mittelklasse-Hardware bei 60 oder 120 fps flüssig. Das Animieren von top, left, width, height, margin, padding oder einer Eigenschaft, die Layout auslöst, wird auf allem außer den einfachsten Seiten ruckeln, weil jeder Frame einen vollständigen Reflow auslöst. Die „Compositor-freundliche“-Eigenschaftsliste (transform + opacity, plus filter und einige andere) ist die übliche sichere Auswahl; alles andere muss unter der tatsächlichen Seitenladung getestet werden. Die CSS-Eigenschaft will-change teilt dem Browser mit, dass eine Eigenschaft animiert wird, sodass er das Element vorab in seine eigene Compositing-Schicht heraufstufen kann; sparsam verwenden, weil jedes will-change GPU-Speicher reserviert.

Barrierefreiheit: prefers-reduced-motion

Eine bedeutende Minderheit der Nutzer (solche mit vestibulären Störungen, Aufmerksamkeitsdefiziten oder schlicht persönlicher Vorliebe) finden Bewegungsdesign ablenkend oder aktiv unangenehm. Die CSS Media Queries Level 5 Spec definiert die Media Feature prefers-reduced-motion, ausgesetzt als Systemeinstellung auf macOS (Systemeinstellungen → Bedienungshilfen → Anzeige → Bewegung reduzieren), Windows 10+ (Einstellungen → Erleichterte Bedienung → Anzeige), iOS, Android und den meisten großen Linux-Desktops. Die Konvention seit etwa 2019: jede nicht-essentielle Animation in @media (prefers-reduced-motion: no-preference) { ... } einhüllen oder mit @media (prefers-reduced-motion: reduce) { transition: none !important; animation: none !important; } umkehren. Die Wahl der Cubic-Bezier-Kurve spielt dafür keine Rolle, die Spec verlangt vom Entwickler, die Animation zu deaktivieren oder erheblich zu verkürzen, wenn der Nutzer die Präferenz ausgedrückt hat. Moderne Designsystem-Dokumentation (Material, Atlassian, GOV.UK) enthält durchgehend Reduced-Motion-Richtlinien.

Spring-Physik, die neuere Alternative

Cubic-Bezier-Timing-Funktionen beschreiben Bewegung als Interpolation fester Dauer entlang einer von Hand abgestimmten Kurve. Spring-Physik beschreibt Bewegung als das natürliche Einschwingen eines gedämpften harmonischen Oszillators: du gibst Masse, Steifigkeit und Dämpfung an, und die Animation läuft, bis die Feder zur Ruhe kommt. Federn fühlen sich für unterbrechbare UI-Gesten natürlicher an, weil sie Schwung haben, der durch Unterbrechungen hindurch trägt, wenn man eine Wischgeste mitten im Flug loslässt, setzt die Feder ihre Bewegung zum Ziel auf einer neuen Kurve fort, statt zu schnappen. Apples iOS verwendet Spring-Physik für die meisten nativen Interaktionen (das Federn einer Scroll-View an der Kante, der Gummiband-Effekt beim Wischen). React Spring (Paul Henschel), Framer Motion und die CSS-Easing-Funktion linear() (wenn sie mit einer abgetasteten Federkurve gefüttert wird) bringen Spring-Semantik ins Web. Cubic-Beziers bleiben das richtige Werkzeug für UI-Übergänge fester Dauer; Federn sind das richtige Werkzeug für gestengesteuerte, unterbrechbare Bewegung. Dieser Editor produziert Cubic-Beziers, die richtige Form für 90 % der UI-Animationsarbeit in 2026.

Wann du zu diesem Werkzeug greifst

• Eine neue Animation nach Gefühl entwerfen. Ziehe die Kontrollpunkte, bis der Vorschau-Ball sich so bewegt, wie du willst, dann kopiere das CSS. Schneller, als vier Zahlen einzutippen und die Seite neu zu laden.
• Eine Animation aus einem anderen Produkt nachbauen. Reverse-Engineere das Timing einer Animation, die du anderswo gesehen hast, indem du anpasst, bis die Vorschau deiner Erinnerung entspricht.
• Eine Brand-Bewegungsbibliothek aufbauen. Lege dich auf drei oder vier spezifische Cubic-Beziers für „schnell“, „weich“, „emphatisch“, „springend“ fest und wende sie konsistent über das Produkt hinweg an.
• Eine Animations-Spec eines Designers reviewen. Füge die Cubic-Bezier-Werte aus einer Figma-Bewegungs-Spec ein und sieh, ob die Kurve die vom Designer beschriebene Bewegung erzeugt.
• Engineer-Designer-Handoff. Ein Designer zieht die richtige Kurve in diesem Werkzeug heraus, kopiert das CSS und fügt es in eine Slack-Nachricht ein, viel mehr Signal als ein vages „mach es springiger“.

Häufige Fragen

Was bedeuten die Werte?

Sie definieren die zwei Kontrollpunkte einer kubischen Bézier-Kurve von (0,0) nach (1,1). P1 = (x1, y1) formt den Anfang der Kurve; P2 = (x2, y2) formt das Ende. Die x-Achse ist die Zeit (muss in [0, 1] sein); die y-Achse ist der Animationsfortschritt (kann [0, 1] für Übersprungeffekte überschreiten). y > 1 bedeutet, dass die Eigenschaft kurzzeitig ihren Zielwert übersteigt, bevor sie sich einpendelt; y < 0 bedeutet, dass die Eigenschaft sich kurz in die falsche Richtung bewegt, bevor sie sich dem Ziel nähert.

Was ist das Standard-CSS-Easing?

Für CSS-Übergänge (transition: opacity 300ms;) ist der Standard ease, äquivalent zu cubic-bezier(0.25, 0.1, 0.25, 1): schneller Start, langsames Ende. Für CSS-Animationen (animation: foo 1s;) ist der Standard ebenfalls ease. Mit transition-timing-function oder animation-timing-function überschreiben. Für die meiste UI-Bewegung erzeugt die ease-out-Variante oder eine Material-artige verzögerte Kurve gefühlt bessere Ergebnisse als der Standard.

Wie mache ich einen springenden oder Übersprung-Effekt?

Schiebe y2 über 1 (typische Werte 1,2–1,6), sodass die Kurve das Ziel kurz überschießt, bevor sie sich einpendelt. Ein häufiges subtiles Springen ist cubic-bezier(0.34, 1.56, 0.64, 1). Für ausgeprägte Sprünge willst du Spring-Physik oder Multi-Keyframe-Animation statt eines einzelnen Cubic-Bezier, Bézier-Kurven können nur einen Spitzenwert haben, also erfordert echtes Springen (mehrere Schwingungen) Keyframes an Zwischenschritten.

Sind benutzerdefinierte Kurven langsamer als die benannten Schlüsselwörter?

Nein, die benannten Schlüsselwörter sind Aliase für spezifische Cubic-Beziers, ausgewertet vom selben Codepfad. Die Performance hängt davon ab, welche Eigenschaft du animierst (transform/opacity = GPU-composited und schnell; layoutbeeinflussende Eigenschaften wie top/left/width = langsam wegen Reflow), nicht von der Timing-Kurve. Die Cubic-Bezier-Auswertungskosten sind vernachlässigbar.

Funktioniert dieses Werkzeug offline?

Ja, der Kurven-Canvas, die Vorschau-Ball-Animation und die CSS-Code-Generierung laufen alle vollständig in deinem Browser über JavaScript. Keine Netzwerkaufrufe während der Nutzung. Schalte die Seite nach dem Laden offline (Flugmodus), und der Editor funktioniert weiter. Keine Telemetrie; die Kurvenwerte, auf die du dich festgelegt hast, verlassen nie dein Gerät.

Verwandte Tools