cubic-bezier()

Die Funktion akzeptiert die folgenden vier Parameter, die die Koordinaten von zwei Kontrollpunkten darstellen:

<x1>

Ein <number>, das die x-Achsen-Koordinate des ersten Kontrollpunktes darstellt. Es muss im Bereich [0, 1] liegen.

<y1>

Ein <number>, das die y-Achsen-Koordinate des ersten Kontrollpunktes darstellt.

<x2>

Ein <number>, das die x-Achsen-Koordinate des zweiten Kontrollpunktes darstellt. Es muss im Bereich [0, 1] liegen.

<y2>

Ein <number>, das die y-Achsen-Koordinate des zweiten Kontrollpunktes darstellt.

Die kubischen Bézier-Funktionen, oft als "glatte" Easing-Funktionen bezeichnet, korrelieren einen Eingabefortschritt mit einem Ausgabefortschritt, beide ausgedrückt als <number>, wobei 0.0 den Anfangszustand und 1.0 den Endzustand darstellt. Wenn die kubische Bézier-Kurve ungültig ist, ignoriert CSS die gesamte Eigenschaft.

Eine kubische Bézier-Kurve wird durch vier Punkte definiert: P0, P1, P2 und P3. Die Punkte P0 und P3 stellen den Anfang und das Ende der Kurve dar. In CSS ist der Anfangspunkt P0 fest bei (0, 0) und der Endpunkt P3 fest bei (1, 1), während die Zwischenpunkte P1 und P2 durch die Funktionsparameter (<x1>, <y1>) und (<x2>, <y2>) definiert sind. Die x-Achse stellt den Eingabefortschritt und die y-Achse den Ausgabefortschritt dar.

Nicht alle kubischen Bézier-Kurven sind als Easing-Funktionen geeignet, da nicht alle mathematische Funktionen sind; d.h. Kurven, die für eine gegebene x-Achsen-Koordinate null oder einen Wert haben. Mit P0 und P3 als fest definiert durch CSS, ist eine kubische Bézier-Kurve eine Funktion und daher gültig, wenn und nur wenn die x-Achsen-Koordinaten von P1 und P2 beide im Bereich [0, 1] liegen.

Kubische Bézier-Kurven mit der Ordinaten P1 oder P2 außerhalb des [0, 1] Bereichs können dazu führen, dass der Wert weiter geht als der Endzustand und dann zurückkehrt. In Animationen erzeugt dies eine Art "Wackel"-Effekt.

Jedoch werden bestimmte Eigenschaften die Ausgabe einschränken, wenn sie außerhalb eines zulässigen Bereichs liegt. Zum Beispiel wird eine Farbkomponente größer als 255 oder kleiner als 0 in rgb() auf den nächstgelegenen erlaubten Wert geschnitten (255 bzw. 0). Einige cubic-bezier()-Werte zeigen diese Eigenschaft.

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

In diesem Beispiel springt der rote Ball aus der Box heraus, wenn er von seiner ursprünglichen Position wechselt. Dies liegt daran, dass einer der P2-Werte, 2.3, über den Bereich [0, 1] hinausgeht.

<div tabindex="0">
  <span></span>
</div>

div {
  margin: 8px auto;
  padding: 8px;
  width: 256px;
  border-radius: 40px;
  background-color: wheat;
}

span {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: tomato;
}

div:hover span,
div:focus span {
  translate: 192px 0;
}

span {
  transition: translate 0.3s cubic-bezier(0.3, 0.8, 0.3, 2.3);
}

Diese kubischen Bézier-Kurven sind zur Verwendung in CSS gültig:

/* The canonical Bézier curve with four <number> in the [0,1] range */
cubic-bezier(0.1, 0.7, 1.0, 0.1)

/* Using <integer> is valid because any <integer> is also a <number> */
cubic-bezier(0, 0, 1, 1)

/* Negative values for ordinates are valid, leading to bouncing effects */
cubic-bezier(0.1, -0.6, 0.2, 0)

/* Values greater than 1.0 for ordinates are also valid */
cubic-bezier(0, 1.1, 0.8, 4)

Diese Definitionen der kubischen Bézier-Kurven sind ungültig:

/* Parameters must be numbers */
cubic-bezier(0.1, red, 1.0, green)

/* X coordinates must be in the [0, 1] range */
cubic-bezier(2.45, 0.6, 4, 0.1)

/* There must be exactly four parameters */
cubic-bezier(0.3, 2.1)

/* X coordinates must be in the [0, 1] range */
cubic-bezier(-1.9, 0.3, -0.2, 2.1)

• Andere Easing-Funktionen: linear() und steps()
• cubic-bezier.com von Lea Verou (2011)