Cubic-Bezier-Generator
Erstellen Sie eine CSS-Animationskurve durch Ziehen der Griffe, mit animierter Vorschau.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Zeichnen Sie Ihre Animationskurve
Ziehen Sie die zwei Griffe im Graphen, um das Easing zu formen, sehen Sie der animierten Kugel zu und kopieren Sie den cubic-bezier()-Wert für Ihr CSS.
-
Mit Vorgabe starten
ease, ease-in-out, linear…
-
Griffe anpassen
X = Zeit (0–1), Y frei für Bounce.
-
CSS kopieren
In transition oder animation einfügen.
Die CSS-Vorgaben
| Name | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (0.25, 0.1, 0.25, 1) |
| ease-in | (0.42, 0, 1, 1) |
| ease-out | (0, 0, 0.58, 1) |
| ease-in-out | (0.42, 0, 0.58, 1) |
X auf [0,1] begrenzt, Y kann für Bounces überschießen. Vorschau über die Web Animations API, alles bleibt lokal.
Häufige Fragen
Was ist eine Cubic-Bezier-Kurve?
Es ist die Timing-Funktion, die beschreibt, wie eine Animation beschleunigt und abbremst. Sie wird durch zwei Kontrollpunkte (x1, y1, x2, y2) definiert. In CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Warum können Y-Werte über 1 liegen?
X bleibt zwischen 0 und 1 (Zeit), aber Y kann [0,1] verlassen, um einen Bounce- oder Overshoot-Effekt zu erzeugen (das Element geht weiter und kommt zurück). So entstehen „back“- und elastische Kurven.
Wie nutze ich es in meinem CSS?
Fügen Sie den Wert in transition: all 0.3s cubic-bezier(…) oder in animation-timing-function ein. Die animierte Vorschau zeigt das echte Ergebnis vor dem Einfügen.
Was sind die Standard-Vorgaben?
ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1). Beginnen Sie mit einer Vorgabe und passen Sie die Griffe an.