Cubic-Bezier Easing-Generator
Cubic-Bezier-Easing mit 4 Kontrollwerten erstellen, Bewegung live ansehen und CSS kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit vier Kontrollwerten (x1, y1, x2, y2) erstellst du die Beschleunigungs- und Abbremskurve (cubic-bezier) für CSS-Animationen. Du siehst dabei den Graphen der Easing-Kurve und eine echte Live-Vorschau der Bewegung und kannst das CSS für transition oder timing-function direkt kopieren.
Anleitung
- Wähle eine Vorlage wie ease-in-out oder back-out als Ausgangspunkt.
- Feinjustiere die Kurve mit den Reglern (oder der Zahleneingabe) für x1, y1, x2 und y2.
- Prüfe die Bewegung anhand des Kurvengraphen und der hin- und herlaufenden Vorschau-Form.
- Lege die Dauer fest und kopiere anschließend das CSS für transition oder timing-function.
FAQ
- Darf der y-Wert größer als 1 oder kleiner als 0 sein?
- Ja. Der x-Wert ist die Zeitachse und muss zwischen 0 und 1 liegen, der y-Wert ist aber der Fortschritt und darf über 1 hinausgehen oder unter 0 fallen. So entsteht der Overshoot-Effekt, bei dem die Bewegung über das Ziel hinausschießt und zurückkehrt.
- Entspricht die Vorschau-Bewegung der Realität?
- Die Vorschau wird mit der echten CSS-transition des Browsers gerendert und bewegt sich daher im selben Browser genau wie später auf der Website. Die Form läuft wiederholt hin und her und zeigt so das Beschleunigen und Abbremsen der Kurve.
- Soll ich transition oder timing-function kopieren?
- Brauchst du eine Zeile inklusive Dauer, nimm „transition kopieren"; willst du nur die Easing-Kurve in eine andere Regel einsetzen, nimm „timing-function kopieren". Beide Werte sind keine ungefähren Näherungen, sondern exaktes, direkt einsetzbares CSS.