Wie funktioniert der cubic-bezier Generator?
Mit diesem Tool können Sie die Kontrollpunkte einer cubic-bezier Kurve intuitiv verschieben. Durch Ziehen der Kontrollpunkte im Canvas werden die vier Parameter der cubic-bezier() Funktion gesetzt. Die Kurve bestimmt die zeitliche Dynamik von CSS-Animationen und Übergängen.
Eine Echtzeit-Vorschau zeigt Ihnen die Auswirkungen der Kurve auf ein animiertes Element. So können Sie sofort sehen, wie sich verschiedene Einstellungen auf das Bewegungsverhalten auswirken, etwa ob die Animation sanft startet oder abrupt stoppt.
Besondere Eigenschaften und Begrenzungen
Das Tool unterstützt y-Werte außerhalb des üblichen 0–1 Bereichs, was Overshoot- oder Bounce-Effekte ermöglicht. Die x-Werte bleiben jedoch zwischen 0 und 1, um eine gültige Zeitachse sicherzustellen. So können Sie auch dynamische Kurven erzeugen, die über das Ziel hinaus schießen und zurückfedern.
Exportiert wird ausschließlich die cubic-bezier() Zeichenkette, die direkt in CSS eingebunden werden kann. Andere Easing-Typen wie Spring oder Step werden nicht unterstützt. Es gibt keine Schnittstellen zu externen Animations-Tools oder Frameworks.
Datenschutz, Browser-Kompatibilität und Praxistipps
Alle Berechnungen und Vorschauen laufen komplett lokal im Browser. Ihre Daten oder Kurven werden weder hochgeladen noch extern gespeichert – ein Vorteil für die Privatsphäre.
Die generierte Kurve kann in allen modernen Browsern und CSS-Umgebungen verwendet werden. Beachten Sie, dass die Zugänglichkeit für Nutzer mit eingeschränkter Motorik begrenzt ist, da Drag-and-Drop notwendig ist. Für UI-Übergänge empfiehlt sich eine Dauer von 200 bis 500 ms, je nach Kontext und gewünschtem Effekt.
Häufig gestellte Fragen
Wie wähle ich die passende Easing-Kurve für meine Animation?
Die Wahl hängt vom gewünschten Bewegungsverhalten ab. Lineare Kurven eignen sich für gleichmäßige Bewegungen, während Kurven mit steilem Anstieg oder Abfall für natürlichen Schwung, sanftes Ein- oder Ausblenden sorgen. Experimentieren Sie mit Kontrollpunkten und nutzen Sie die Live-Vorschau, um das Ergebnis zu beurteilen.
Kann ich Overshoot- oder Bounce-Effekte erstellen?
Ja, indem Sie die y-Werte der Kontrollpunkte außerhalb des 0–1 Bereichs setzen, sind Überschwinger und Rückfederungs-Animationen möglich. Die x-Werte bleiben jedoch immer zwischen 0 und 1, damit die Animation zeitlich korrekt abläuft.
Welche Dauer empfiehlt sich für UI-Transitionen?
Für typische UI-Übergänge liegt die empfohlene Dauer zwischen 200 und 500 ms. Längere Animationen wirken oft träge, während zu kurze Übergänge abrupt erscheinen. Testen Sie verschiedene Werte im Tool, um das optimale Timing zu finden.
Werden Daten gespeichert oder übertragen?
Nein, alle Einstellungen und Vorschauen werden ausschließlich lokal im Browser verarbeitet. Es erfolgt keinerlei Datenübertragung oder Speicherung außerhalb Ihres Geräts – Ihre Privatsphäre bleibt gewahrt.
Kann die erzeugte Kurve überall in CSS verwendet werden?
Ja, die generierte <code>cubic-bezier()</code> Zeichenkette ist mit allen modernen Browsern kompatibel. Sie können den String direkt in CSS-Animationen oder Übergängen einsetzen.
Kann ich die Animation mit unterschiedlichen Dauern testen?
Ja, Sie können die Dauer der Vorschauanimation frei einstellen und so verschiedene Timing-Effekte vergleichen. Das hilft, die Kurve optimal an Ihren Anwendungsfall anzupassen.
Probleme oder Ideen zu diesem Werkzeug? Mitteilung senden