Cubic-Bezier-Easing-Kurven-Generator
Erstellen Sie cubic-bezier-Easing-Kurven für CSS. Inklusive standardmäßiger Voreinstellungen.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
So verwenden Sie dieses Tool
- 1
Click a preset (ease, ease-in, ease-out, or ease-in-out) to load its four control values, or skip this to start from the default ease curve.
- 2
Drag the a, b, c, and d sliders to adjust the two control points; each ranges from -1 to 2 in steps of 0.05 and the current value shows above the slider.
- 3
Read the generated transition-timing-function: cubic-bezier(a, b, c, d); line in the output box.
- 4
Copy that declaration by hand and drop it into your CSS transition or animation rule.
Was ist der Cubic-Bezier-Kurven-Generator?
CSS-Animationen verwenden Easing-Funktionen, um zu steuern, wie sich Werte im Zeitverlauf ändern. Die vier Parameter von cubic-bezier definieren eine Kurve von (0,0) bis (1,1): Je steiler die Kurve, desto schneller die Animation in diesem Bereich. Gängige Voreinstellungen decken die meisten Anforderungen ab; benutzerdefinierte Kurven erzeugen eine unverwechselbare Bewegung.
Häufige Anwendungsfälle
Tuning a button hover or focus transition so it feels snappy on entry and gentle on exit instead of using the generic default ease.
Designing a card or modal that overshoots slightly on open by pushing the d (P2 y) value above 1 for a subtle bounce.
Matching a brand motion spec where designers handed you specific cubic-bezier control points to reproduce in CSS.
Replacing a linear or default easing on a loading spinner or progress bar with a custom acceleration profile.
Quickly grabbing the canonical values behind ease-in-out without memorizing 0.42, 0, 0.58, 1.
Prototyping menu slide-in and drawer animations by comparing how ease-in versus ease-out change the perceived weight of the motion.
Häufig gestellte Fragen
Was ist der Unterschied zwischen ease und ease-in?▼
Wann sollte ich benutzerdefinierte Kurven verwenden?▼
Verwandte Tools
Farbkonverter (HEX/RGB/HSL)
Wandeln Sie Farben zwischen den Formaten HEX, RGB und HSL um. Wählen Sie eine Farbe visuell aus oder geben Sie die Werte manuell ein.
CSS-Box-Shadow-Generator
Erstellen Sie box-shadow-Werte in CSS auf visuelle Weise. Vorschau in Echtzeit und Kopieren des generierten CSS.
CSS-Verlaufsgenerator
Erstellen Sie lineare und radiale CSS-Verläufe. Wählen Sie die Farben visuell aus und kopieren Sie das generierte CSS.
Farbpaletten-Generator
Erzeugen Sie harmonische Farbpaletten aus jeder beliebigen Grundfarbe. Unterstützt komplementäre, analoge, triadische und monochromatische Schemata.
CSS-Border-Radius-Generator
Erstellen Sie komplexe border-radius-Werte in CSS auf visuelle Weise. Unabhängige Steuerung jeder Ecke.
CSS-clamp()-Generator
Erzeugen Sie fluide, responsive CSS-Werte mit clamp(). Skaliert gleichmäßig zwischen Mindest- und Höchstgrößen über die Viewport-Bereiche hinweg.