Diese Seite nutzt datenschutzfreundliche Analyse-Daten aus erster Hand, um zu sehen, welche Seiten und Tools nützlich sind. Keine Daten werden an Werbetreibende oder Tracking-Dienste Dritter weitergegeben. Mehr erfahren

Tools · CSS · Cubic-Bezier-Easing-Generator

Cubic-Bezier-Easing-Generator

Ziehe eine Kurve, um einen cubic-bezier()-Easing-Wert zu erstellen, sieh sie mit einem echten CSS-Übergang live abspielen, und kopiere den Code.

Datei hier ablegen oder auswählen.

Läuft komplett im Browser. Es wird nichts hochgeladen.

So funktioniert es

  1. Ziehe die Kurve, oder gib die vier X/Y-Zahlen direkt ein.

  2. Sieh dir die Live-Bewegungsdemo an - sie führt einen echten CSS-Übergang mit deiner Kurve aus.

  3. Kopiere den erzeugten cubic-bezier()-Wert.

Häufige Fragen

Das verlangt CSS so - x ist die Zeit, die weder zurücklaufen noch über das Ende des Übergangs hinausgehen kann. y ist der interpolierte Wert, der legitim über 1 hinausschießen oder unter 0 fallen kann - genau das gibt Federn- oder "Back"-Kurven ihr Gefühl.

Nein. Die Kurve, das Diagramm und die Bewegungsdemo werden vollständig in deinem Browser erzeugt und angezeigt.

Ja. Derselbe cubic-bezier()-Wert funktioniert in beiden Eigenschaften.

Die echte Sache. Der Demo-Punkt bewegt sich unter einem echten CSS-Übergang mit genau deinem cubic-bezier()-Wert als Timing-Funktion, nicht mit einer handgeschriebenen Annäherung der Mathematik.

Ähnliche Tools

CSS-Verlauf erstellen

Erstelle einen linearen, radialen oder konischen CSS-Verlauf, und kopiere den Code.

 CSS-Schatten erstellen

Erstelle einen mehrschichtigen CSS-Schatten (box-shadow) mit Live-Vorschau, und kopiere den Code.

 CSS-Ecken abrunden

Gestalte jede Ecke einer Box einzeln, oder verschmelze sie zu einer organischen Blob-Form, und kopiere das border-radius-CSS.

 Glassmorphism-Effekt erstellen

Erstelle eine Milchglas-Karte mit Hintergrundunschärfe, Transparenz und weichem Rand, und kopiere das CSS.

 Clip-Path-Generator

Erstelle eine CSS-clip-path-Form - Polygon, Kreis, Ellipse oder Inset - mit Live-Vorschau, und kopiere den Code.

 CSS-Minifizierer & -Formatierer

Minifiziere oder formatiere CSS, live während du einfügst, vollständig in deinem Browser.

 Flexbox-Spielwiese

Erstelle ein CSS-Flexbox-Layout - Richtung, Umbruch, Ausrichtung, Abstand sowie Wachstum, Schrumpfung und Basis je Element - mit Live-Vorschau, und kopiere den Code.

 Grid-Spielwiese

Erstelle ein CSS-Grid-Layout - Spurenzahl, Abstände, Ausrichtung sowie Platzierung je Element - mit Live-Vorschau, und kopiere den Code.

Kommentare

  1. Noch keine Kommentare. Teile deine Erfahrung als Erstes.
Deine Bewertung (optional)

Keine Bewertung ausgewählt