Kontrollpunkte

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Beliebte Beschleunigungsvorgaben

CSS Ausgabe

cubic-bezier(0.25, 0.1, 0.25, 1)

Preview

Duration: 500ms

Bezier-Kurve Visualisierung

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

Kubische Bézier-Kurve Dokumentation

Was ist eine kubische Bézier-Kurve?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS-Syntax

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Häufige Anwendungsfälle

  • Animierte Übergänge:Erstellen Sie flüssige Animationen für Elemente, die ihre Eigenschaften ändern.
  • Scroll-Effekte:Steuern Sie die Geschwindigkeit von Scroll-Animationen.
  • Interaktive Elemente:Definieren Sie, wie Elemente auf Benutzerinteraktionen wie Bewegen oder Klicken reagieren.
  • Motion Design:Erstellen Sie komplexe Bewegungsabläufe für UI-Elemente.

Beliebte Beschleunigungsfunktionen

Ease (default)

Beginnt langsam, beschleunigt schnell und verlangsamt sich dann wieder.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Konstante Geschwindigkeit von Anfang bis Ende.

cubic-bezier(0, 0, 1, 1)

Ease-in

Startet langsam, beschleunigt dann.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Startet schnell, bremst dann ab.

cubic-bezier(0, 0, 0.58, 1)

Tipps zum Erstellen benutzerdefinierter Kurven

  1. Halten Sie x-Werte zwischen 0 und 1:Werte außerhalb dieses Bereichs können zu unerwartetem Verhalten führen.
  2. Visualisieren der Kurve:Verwenden Sie das interaktive Diagramm, um zu verstehen, wie sich Änderungen auf die Animation auswirken.
  3. Testen Sie mit echten Elementen:Zeigen Sie Ihre Kurve immer mit echten UI-Komponenten an, um sicherzustellen, dass sie sich richtig anfühlt.
  4. Speichern von Voreinstellungen:Lesezeichen für nützliche Kurven für zukünftige Projekte.

Related Tools

CSS3-Transformationen mühelos erstellen

Ein leistungsstarkes, intuitives Tool zum Erstellen komplexer CSS3-Transformationen, ohne Code schreiben zu müssen. Visualisieren Sie Änderungen in Echtzeit und kopieren Sie das generierte CSS, um es in Ihren Projekten zu verwenden.

CSS-Minimierer

Komprimieren und optimieren Sie Ihren CSS-Code mit professioneller Präzision

Less-zu-CSS-Konverter

Wandeln Sie Ihren Less-Code in CSS um. Schnell, einfach und sicher.

HTML-Kodierungstool

Codieren Sie Text ganz einfach direkt in Ihrem Browser in HTML-Entitäten. Perfekt für Entwickler und Content-Ersteller.

RGB-zu-HSV

Konvertieren von RGB-Farben in HSV-Werte für eine intuitive Farbmanipulation

CSS-Dreieck-Generator

Passen Sie Ihr Dreieck mit den folgenden Optionen an und erhalten Sie den generierten CSS-Code sofort.