Cubic-Bezier-Rechner
Berechne den Verlauf einer CSS-Cubic-Bezier-Kurve mit Steuerpunkten, Fortschritt, Überschwingen und Zeitpunkten. Übernimm den CSS-Ausdruck direkt.
Häufige CSS-Cubic-Bezier-Voreinstellungen
Jedes Paar von Steuerpunkten bestimmt, wie sich der Fortschritt zwischen Animationsbeginn und Animationsende verändert.
| Voreinstellung | Steuerpunkte | Bewegungsgefühl |
|---|---|---|
| linear | 0.333333, 0.333333, 0.666667, 0.666667 | Konstante Geschwindigkeit |
| ease | 0.25, 0.1, 0.25, 1 | Sanfter Standardverlauf |
| ease-in | 0.42, 0, 1, 1 | Beginnt langsam |
| ease-out | 0, 0, 0.58, 1 | Endet langsam |
| ease-in-out | 0.42, 0, 0.58, 1 | An beiden Enden langsam |
| ease-in-back | 0.36, 0, 0.66, -0.56 | Zieht kurz zurück |
| ease-out-back | 0.34, 1.56, 0.64, 1 | Schwingt über das Ziel |
Häufige Fragen
Was berechnet der Cubic-Bezier-Rechner?
Der Rechner wertet eine CSS-Funktion cubic-bezier(x1, y1, x2, y2) aus. Du gibst vier Steuerpunkte und den Zeitanteil t ein. Das Ergebnis zeigt den Fortschritt, Überschwingen, Unterschwingen und eine Tabelle mit Zeitpunkten.
Wie wird der Verlauf der Kurve berechnet?
Eine Cubic-Bezier-Kurve hat feste Endpunkte bei (0, 0) und (1, 1) sowie zwei Steuerpunkte. Der Rechner löst die x-Komponente für den gewünschten Zeitanteil und liest danach den passenden y-Fortschritt ab.
Warum müssen x1 und x2 zwischen 0 und 1 liegen?
Die CSS-Spezifikation verlangt für die x-Koordinaten beider Steuerpunkte den Bereich von 0 bis 1. Dadurch bleibt die Zeitachse monoton und jeder Zeitpunkt erhält genau einen Fortschrittswert. Die y-Koordinaten dürfen außerhalb liegen.
Was bedeuten Überschwingen und Unterschwingen?
Überschwingen bedeutet, dass der Fortschritt über 1 steigt. Unterschwingen bedeutet, dass er unter 0 fällt. Rückfederungs- und Vorwegnahmeeffekte nutzen diese Werte bewusst für eine federnde Bewegung.
Kann ich CSS-Voreinstellungen wie ease verwenden?
Ja. Die Voreinstellungen übernehmen die normgerechten Steuerpunkte von ease, ease-in, ease-out, ease-in-out und linear. Danach kannst du jeden Punkt ändern und den Verlauf für deine Animation weiter anpassen.
Wie übernehme ich den Ausdruck in CSS?
Kopiere den Ausdruck cubic-bezier(...) aus dem Ergebnis in transition-timing-function oder animation-timing-function. Die Dezimalpunkte und Kommas bleiben dabei im CSS-Format erhalten, auch wenn du deutsche Dezimalzahlen eingibst.
Änderungsverlauf
Aktualisierungen von Cubic-Bezier-Rechner, nach Datum gruppiert.
1 Aktualisierung
Cubic-Bezier-Rechner hinzugefügt
- Berechne den Verlauf einer CSS-Cubic-Bezier-Kurve mit Steuerpunkten, Fortschritt, Überschwingen und Zeitpunkten. Übernimm den CSS-Ausdruck direkt.
Ähnliche Rechner
Weitere geprüfte Rechner im Themenbereich „Technik“.