CSS Easing / cubic-bezier Generator
Erstellen Sie visuell CSS cubic-bezier Beschleunigungsfunktionen und zeigen Sie diese in der Vorschau an. Ziehen Sie Kontrollpunkte auf der interaktiven Kurve, wählen Sie aus Voreinstellungen und kopieren Sie die CSS Timing-Funktion.
Presets
Drag the control points
x10.42
y10.00
x20.58
y21.00
CSS Output
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);
animation-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);
So verwenden Sie CSS Easing / cubic-bezier Generator
- 1Wählen Sie eine Beschleunigungsvoreinstellung oder ziehen Sie die Kontrollpunkte, um eine benutzerdefinierte Kurve zu erstellen.
- 2Zeigen Sie die Animation in Echtzeit mit einem sich bewegenden Ball in der Vorschau an.
- 3Kopieren Sie den cubic-bezier() CSS Wert zur Verwendung in Ihren Übergängen.
ZenovayAnalytics
Machen Sie aus Besuchern Kunden.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
CSS Gradient Generator
Erstellen Sie schöne CSS-Gradienten mit einem visuellen Editor. Lineare, radiale und konische Gradienten.CSS Box Shadow Generator
Entwerfen Sie CSS Box Shadows mit visuellen Steuerelementen. Passen Sie Offset, Unschärfe, Ausbreitung und Farbe an.CSS Border Radius Generator
Erstellen Sie benutzerdefinierte Border-Radius-Werte mit visuellen Steuerelementen. Verknüpfen oder trennen Sie Ecken für schnelle Anpassungen.CSS Flexbox Playground
Erlernen und generieren Sie CSS Flexbox Layouts visuell. Passen Sie Richtung, Ausrichtung, Umbruch und Lücke in Echtzeit an.Häufig gestellte Fragen
Was ist cubic-bezier() in CSS?▾
cubic-bezier(x1, y1, x2, y2) definiert eine kubische Bezier-Kurve, die als CSS-Timing-Funktion für Übergänge und Animationen verwendet wird. Die Kurve wird durch 4 Punkte definiert: P0=(0,0) Start, P1=(x1,y1) Kontrollpunkt 1, P2=(x2,y2) Kontrollpunkt 2, P3=(1,1) Ende. x1, x2 müssen in [0,1] liegen (Zeitachse). y1, y2 können außerhalb von [0,1] liegen für Überschwingungseffekte. CSS-Schlüsselwörter entsprechen bestimmten Kurven: ease = (0.25, 0.1, 0.25, 1.0), ease-in = (0.42, 0, 1.0, 1.0), ease-out = (0, 0, 0.58, 1.0), ease-in-out = (0.42, 0, 0.58, 1.0), linear = (0, 0, 1, 1).
Was ist der Unterschied zwischen ease-in, ease-out und ease-in-out?▾
ease-in: langsamer Start, schnelles Ende – wie ein Objekt, das aus dem Stillstand startet (Schwerkraft). ease-out: schneller Start, langsames Ende – wie ein Ball, der auf einer Oberfläche landet. ease-in-out: langsamer Start, schnelle Mitte, langsames Ende – symmetrische S-Kurve. linear: konstante Geschwindigkeit. ease: der CSS-Standard – leicht ease-in, dann ease-out. Faustregeln: Verwenden Sie ease-out für Elemente, die den Bildschirm betreten (wirkt natürlich). Verwenden Sie ease-in für Elemente, die den Bildschirm verlassen (beschleunigen beim Verlassen). Verwenden Sie ease-in-out für Zustandsübergänge. Verwenden Sie niemals linear für UI – es wirkt mechanisch und roboterhaft.
Was sind Federanimationen und wie unterscheiden sie sich von Bezier?▾
Cubic-bezier: feste Dauer, physikagnostisches Timing. Die Animation dauert immer genau die angegebene Zeit. Feder: physikbasiert mit Masse, Steifigkeit, Dämpfung und Geschwindigkeit. Die Dauer ist nicht festgelegt – sie läuft bis das System zur Ruhe kommt. Federn können natürlich überschwingen und oszillieren. CSS unterstützt Federn nativ nicht – sie erfordern JavaScript (Framer Motion, React Spring, GSAP). Für reines CSS approximiert cubic-bezier mit y-Werten außerhalb von [0,1] ein Federüberschwingen. Beispiel: cubic-bezier(0.34, 1.56, 0.64, 1) erzeugt ein mildes federähnliches Überschwingen.
Wie wähle ich das richtige Easing für meine Animation?▾
Prinzipien: Objekte in der realen Welt starten oder stoppen nicht instantan. Befolgen Sie materielle Interaktionen: Elemente, die den Bildschirm betreten, sollten ease-out (verlangsamen beim Ankommen). Elemente, die den Bildschirm verlassen, sollten ease-in (beschleunigen beim Verlassen). Zustandsänderungen (Aufklappen, Zusammenklappen) verwenden ease-in-out. Micro-Interaktionen (Tastendruck) verwenden ease-out für die Reaktion, ease-in für das Zurücksetzen. Material Design verwendet: Standardkurve (0.4, 0, 0.2, 1), Verzögerung (0, 0, 0.2, 1), Beschleunigung (0.4, 0, 1, 1). iOS verwendet Federanimationen mit leichtem Überschwingen.
Was ist CSS linear() für komplexe Animationen?▾
CSS linear() (2023) ermöglicht mehrstufige lineare Interpolation – im Wesentlichen eine stückweise lineare Funktion, die komplexe Kurven approximiert. Syntax: animation-timing-function: linear(0, 0.25, 1); Ein Bounce-Easing: linear(0, 0.063, 0.25 18.2%, 1 36.4%, 0.813 54.5%, 1 72.7%, 0.941 81.8%, 1). So erhalten Sie Feder-, Abprall- und komplexe Physikanimationen ohne JavaScript. Die JavaScript-Funktion generateLinearEasing() aus der Web Animations API kann diese Werte aus jeder Physiksimulation berechnen. Browser-Unterstützung: Chrome 113+, Firefox 112+, Safari 17.2+.