Toolipedia Einbetten
DE
← Alle Text-Tools

Cubic-Bezier-Generator

Ziehen Sie eine Kurve, um CSS-Easing zu gestalten, sehen Sie die Animation und kopieren Sie die Timing-Funktion.

  • Kostenlos
  • Ohne Anmeldung
  • Funktioniert auf jedem Gerät

Über Cubic-Bezier-Generator

Ziehen Sie die beiden Steuerpunkte einer Bézierkurve, um eine eigene Beschleunigungskurve für CSS-Übergänge und Animationen zu gestalten, sehen Sie einem Ball bei der Animation damit zu und kopieren Sie den Wert cubic-bezier(x1, y1, x2, y2). Die x-Werte müssen zwischen 0 und 1 bleiben, während y für einen Überschwing-Effekt darüber hinausgehen kann.

So verwenden Sie Cubic-Bezier-Generator

  1. Ziehe die beiden Griffe der Kurve, um das Easing zu formen.
  2. Drücke auf Play, um ein Element mit deinem Timing zu sehen.
  3. Kopiere die cubic-bezier-Funktion in deinen Übergang oder deine Animation.

Warum dieses Tool?

Auch bekannt als

Häufig gestellte Fragen

Was bedeuten die vier cubic-bezier-Zahlen?

Es sind die x- und y-Koordinaten zweier Kontrollpunkte auf der Geschwindigkeitskurve. Steilere Abschnitte bedeuten schnellere Bewegung, flachere Abschnitte langsamere Bewegung.

Kann die Kurve außerhalb des Kastens verlaufen?

Vertikale Werte können über 0 und 1 hinausgehen, was ein Überschwingen oder Federn erzeugt. Horizontale Werte müssen zwischen 0 und 1 bleiben.

Welche Kurve fühlt sich für Oberflächenbewegung natürlich an?

Eine Ease-out-Kurve, am Anfang schnell und am Ende langsam, wirkt reaktionsfreudig für Elemente, die in den Bildschirm kommen. Probiere zuerst kurze Dauern.

Ist Cubic-Bezier-Generator kostenlos?

Ja. Cubic-Bezier-Generator auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.

Ist die Nutzung sicher?

Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.

Funktioniert es auf meinem Smartphone?

Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.

Brauche ich ein Konto?

Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.

Kann ich Cubic-Bezier-Generator auf meiner eigenen Website einsetzen?

Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.

Ähnliche Tools