CSS Easing Generator
Bézierkurven-Editor
Animationsvorschau
Häufige Beschleunigungseffekte
Kostenloser Online-CSS-Easing-Generator. Ziehen Sie Kontrollpunkte, um cubic-bezier-Kurven zu erstellen. Integrierte Voreinstellungen für ease, ease-in, ease-out, ease-in-out und linear. Echtzeit-Animationsvorschau.
Tipps und Tricks
Kontrollpunkte ziehen
Ziehen Sie die beiden Kontrollpunkte (P1, P2) direkt auf der Kurve, um die Beschleunigungskurve in Echtzeit anzupassen. Die X-Achse repräsentiert den Zeitverlauf, die Y-Achse die Eigenschaftsänderung, und die Kurvensteigung bestimmt die Geschwindigkeitsänderung der Animation.
Live-Animation-Vorschau
Klicken Sie auf "Animation abspielen", um zu sehen, wie sich der Ball entlang der Beschleunigungsfunktion bewegt. Der Fortschrittsbalken zeigt intuitiv den Zeitverlauf an.
Mit einem Klick kopieren CSS
Nach der Anpassung klicken Sie auf die Schaltfläche "Kopieren", um den CSS cubic-bezier()-Code automatisch in die Zwischenablage zu kopieren, bereit zum direkten Einfügen in Ihr Projekt.
Häufige Anwendungsfälle
Eingangsanimationen
ease-out
Ausgangsanimationen
ease-in
Übergänge
ease-in-out
Hover-Effekte
Benutzerdefinierte Kurven
Fortschrittsanzeigen
linear
FAQ
Was ist cubic-bezier?
cubic-bezier ist eine CSS-Funktion, die die Geschwindigkeitskurve einer Animation definiert. Sie wird durch eine kubische Bézierkurve mit zwei Kontrollpunkten beschrieben: P1 (x1, y1) und P2 (x2, y2). Die X-Achse der Kurve repräsentiert den Zeitverlauf (0→1), die Y-Achse die Eigenschaftsänderung (0→1). Eine steilere Kurve bedeutet schnellere Geschwindigkeit; eine flachere Kurve bedeutet langsamere Geschwindigkeit.
Wie verwende ich benutzerdefinierte Beschleunigung in CSS?
Verwenden Sie es direkt in CSS-Transition- oder Animationseigenschaften: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. Der Codeausgabebereich des Generators erzeugt automatisch den korrekten CSS-Code. Klicken Sie auf Kopieren, um ihn direkt einzufügen.
Was sind die gültigen Bereiche für X und Y?
CSS cubic-bezier() erfordert, dass X-Werte zwischen 0 und 1 liegen (entsprechend der Zeit von Anfang bis Ende), und Y-Werte liegen typischerweise zwischen 0 und 1, können diesen Bereich jedoch überschreiten (um Bounce-Effekte zu erzeugen). Dieses Tool begrenzt X auf [0, 1] und Y auf [0, 1], um sicherzustellen, dass die generierten Kurven gültige CSS-Beschleunigungsfunktionen sind.
Was ist der Unterschied zwischen den voreingestellten Beschleunigungen?
ease: Schnell dann langsam dann schnell, geeignet für allgemeine Übergänge.
ease-in: Langsam bis schnell, geeignet für Ausgangsanimationen (Elemente verlassen).
ease-out: Schnell bis langsam, geeignet für Eingangsanimationen (Elemente betreten), die am häufigsten verwendete Beschleunigung.
ease-in-out: Langsam an beiden Enden, schnell in der Mitte, gleichmäßiger als ease.
linear: Konstante Geschwindigkeit, geeignet für Animationen, die keine Beschleunigung benötigen.