Was ist ein cubic-bezier?

Eine Kurve, die durch 4 Kontrollwerte definiert ist – wird von CSS-Übergängen und -Animationen verwendet, um die Änderungsrate über die Zeit zu steuern. Das browserinterne 'ease' ist cubic-bezier(0.25, 0.1, 0.25, 1).

Wenn die Easing-Kurve 0 oder 1 überschreitet (Kontroll-y-Werte 1), 'springt' die Animation über ihre Endpunkte hinaus. Nützlich für spielerische UIs.

Sind Voreinstellungen verfügbar?

Ja – gängige Voreinstellungen (linear, ease, ease-in, ease-out, ease-in-out) sowie einige beliebte benutzerdefinierte Kurven.

Ist der Editor kostenlos?

Ja – komplett kostenlos, keine Anmeldung.

Farbe & Design

Cubic-Bezier-Editor

Kostenloser Cubic-Bezier-Editor. Gestalten Sie CSS-Easing-Kurven visuell mit Ziehgriffen, Voreinstellungen und Live-Animationsvorschau. Kopieren Sie CSS für Übergänge und Animationen.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Anmerkung der Redaktion

Understanding · Time, but with feeling.

Dieses ausführliche Kapitel ist derzeit nur auf Englisch verfügbar. Das Konvertierungstool oben funktioniert in Ihrer Sprache; der lange Erklärtext wurde noch nicht übersetzt.

Häufig gestellte Fragen

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

Andere suchten auch nach

Verwandte Tools

More in this room.

Alle anzeigen in Farbe & Design